如何将导航栏静态引导至固定滚动？
如何将导航栏静态引导至固定滚动？
提问于 2014-01-23 14:52:09
我想使静态导航栏，以固定导航栏滚动，当它达到页面顶部。
有没有办法使用bootstrap 3css或javascript获得它？
回答 16
Stack Overflow用户
发布于 2014-01-23 15:25:19
如果我没记错的话，你想要实现的东西叫做Sticky navbar。
只需几行jQuery和scroll事件就可以很容易地实现：
$(document).ready(function() {
var menu = $('.menu');
var content = $('.content');
var origOffsetY = menu.offset().top;
function scroll() {
if ($(window).scrollTop() >= origOffsetY) {
menu.addClass('sticky');
content.addClass('menu-padding');
} else {
menu.removeClass('sticky');
content.removeClass('menu-padding');
}
}
$(document).scroll();
});我已经为您做了一个快速工作示例，希望它能对您有所帮助：http://jsfiddle.net/yeco/4EcFf/
要使它与Bootstrap一起工作，您只需添加或删除“navbar-fixed top”而不是jsfiddle中的“粘性”类。
Stack Overflow用户
发布于 2014-01-23 18:50:29
使用Bootstrap附带的affix组件。从'navbar-static-top‘开始，当达到标题的高度(导航栏上的内容)时，它将更改为fixed……
$('#nav').affix({
offset: {
top: $('header').height()
}
}); http://bootply.com/107973
Stack Overflow用户
发布于 2014-01-23 15:17:58
我很确定，这是你所期待的。看看这把小提琴，这可能会对你有帮助。
http://jsfiddle.net/JK52L/8/
你的超文本标记语言应该有navbar-fixed-top或navbar-fixed-bottom类。
HTML
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>JS
$(document).scroll(function(e){
var scrollTop = $(document).scrollTop();
if(scrollTop > 0){
console.log(scrollTop);
$('.navbar').removeClass('navbar-static-top').addClass('navbar-fixed-top');
} else {
$('.navbar').removeClass('navbar-fixed-top').addClass('navbar-static-top');
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21301316
复制相关文章
相似问题
腾讯云开发者
