我想在我的页面上有多个部分,每个部分都有一个堆叠的导航。堆叠的导航应该留在sectiondiv中。第一个堆叠的导航留在第一部分。
第二个堆叠导航栏在滚动时跳转到底部和向后。谁能告诉我发生了什么,以及我该如何解决这个问题?
演示:http://www.bootply.com/vAT4FJgSMS
您可以通过给它们一些标识类,然后为每个元素使用类:
来一次性定位所有可附加的边栏。$('.sideNav').each(function() {
$(this).affix({ /* options */ });
});
然后你只需要设置每个部分的顶部和底部。
$(this).affix({
offset: {
top: function(e) {
var $curSection = $(e).closest('.row');
return (this.top = $curSection.offset().top - 10);
},
bottom: function (e) {
var $nextSection = $(e).closest('section').next('section');
//if last element, go to bottom of page
var bottom = ($nextSection.length === 0) ? 0 :
$(document).height() - $nextSection.offset().top;
return (this.bottom = bottom);
}
}
});
当元素不在top
和bottom
范围内时,应用affix-top
和affix-bottom
。你通常只希望这些元素返回到正常的流,所以你可以这样设置你的css(或者干脆忽略,因为相对位置是默认位置):
.affix-top,
.affix-bottom {
position: relative;
}
当应用词缀类时,您可以这样设置列表的样式:
.affix {
position: fixed !important;
top: 10px;
}