jquery - Bootstrap词缀从页面中间开始

我希望页面上有多个部分，每个部分都有一个堆叠的导航。堆叠的导航应留在div部分中。
第一个堆叠的导航保留在第一部分中。

滚动时，第二个堆叠的导航跳到底部并返回。
谁能解释我发生了什么事，以及我该如何解决。

演示：
http://www.bootply.com/vAT4FJgSMS#

最佳答案

通过为它们提供一些识别类，然后applying affix for each element with the class，可以一次定位所有可固定的侧边栏：

$('.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);
        }
    }
});

当元素不再位于affix-top和affix-bottom的范围内时，将应用top和bottom。通常，您只希望这些元素返回到正常流程，因此可以像这样设置css（或者甚至完全忽略，因为相对是默认位置）：

.affix-top,
.affix-bottom {
    position: relative;
}

当应用词缀类时，您可以像这样对列表进行样式设置：

.affix {
    position: fixed !important;
    top: 10px;
}

Working Demo in fiddle

关于jquery - Bootstrap词缀从页面中间开始，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25084796/