我目前在单页面布局中使用带有内置scrollspy功能的bootstrap导航栏。 (如本例所示:http://blackrockdigital.github.io/startbootstrap-scrolling-nav/)
我想将导航栏放在#intro
部分的底部,并在向下滚动时固定在顶部。
问题:
如何防止导航栏上下跳动(滚动和点击导航元素时)?
/////////////////////////////////////////////// ///////
解决方案:
我通过在上面提到的演示中添加一些CSS解决了这个问题:
.navbar {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
margin: 0;
}
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 1030;
}
并将jQuery代码更改为:
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 50;
if ($(window).scrollTop() > navHeight) {
$('.navbar').addClass('navbar-fixed-top');
}
else {
$('.navbar').removeClass('navbar-fixed-top');
}
});
});
对于演示看起来JSFiddle:https://jsfiddle.net/90jbhe54/
现在它工作得很好而且很流利。