引导导航栏-固定顶部隐藏#内容链接
引导导航栏-固定顶部隐藏#内容链接
提问于 2016-08-01 20:04:57
我是一名软件开发学生，在我的网页开发课上，我正在创建一个页面。我使用的是引导，我有一个navbar-fixed-top，主体是一个table-striped表，其中每一行都有一个<a href = "#section" >Section</a>"链接。
问题是，这是一个非常长的列表，所以我添加了一个jQuery UI自动完成和一个按钮，所以当用户点击按钮(帮助完成了自动完成)时，它会重定向到相应的#区段行。
自动完成和按钮正常工作，但当页面重定向发生时，我希望看到的行隐藏在导航栏后面。
我读了一些这篇文章，发现快速而肮脏的方法是通过css使用：
padding-top: 65px; 布uuuut我不想这样做，因为它会导致一个令人难以置信的长表。
对不起，如果我没有说清楚，这里有一些代码，以防万一：
示例html
<script>
//code for the redirects
(function ($) {
$.fn.goTo = function () {
$('html, body').animate({
scrollTop: $(this).offset().top + 'px'
}, 'fast');
return this; // for chaining...
}
})(jQuery);
</script>
<button class="btn btn-info" onclick="$('#' + document.getElementById('tags').value).goTo();" >Search</button>
<!-- I dont know if theres a way to optimize this search code but right now its working fine-->
<div class="table-responsive">
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr id = "Section1">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr id = "Section2">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<!-- code continues similarly for nearly 1000 rows -->
</tbody>
</table>
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-01 20:11:54
只需将导航条高度的偏移量添加到scrollTop方程中即可。
//code for the redirects
(function ($) {
$.fn.goTo = function () {
var offset = $(this).offset().top - 65;
$('html, body').animate({
scrollTop: offset + 'px'
}, 'fast');
return this; // for chaining...
}
})(jQuery);你甚至可以更进一步，动态地抓住肚脐的高度。
var navHeight = $('.nav').height();
Stack Overflow用户
发布于 2016-08-02 18:48:56
一个快速更好的代码解决方案，因为你知道引导jquery等，使用DataTable插件，应用插件你不需要担心搜索，过滤，分页等等。以下是参考链接；https://datatables.net/
$(document).ready(function(){
$('.table-responsive').DataTable({// Use id/ Class of html table to apply plugin
// u can do stuffs here
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38707218
复制相关文章
相似问题
腾讯云开发者
