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

Question

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

第二个堆叠式导航在滚动的同时跳转到底部并返回。任何人都可以向我解释发生了什么，以及我该如何解决这个问题。

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

Answer 1

您可以通过给它们一些识别类然后 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(或者甚至完全忽略，因为 relative 是默认位置):

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

应用词缀类时，您可以像这样设置列表样式:

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

Working Demo in fiddle