javascript - 页面刷新后的Bootstrap 3词缀位置

我已经配置了一个大多数都能使用的词缀，如本页所示：http://wisderm.com/ingredients/Green+Tea+Extract

这是我用于动态更改词缀偏移量的代码：

// nav-pills is the class of the <ul> element of the sidebar
// #hero-unit is the jumbotron

// where to start scrolling from
$('.nav-pills').affix( {
    offset: { top: function() { return $('#hero-unit').outerHeight(true)+10; } }
});

// after changing from affix-top to affix
$('.nav-pills').on('affixed.bs.affix', function() {
    $('.nav-pills').css("margin-top", function() { return -$('#hero-unit').outerHeight(true)+10; } );
});

// after changing back to from affix to affix-top
$('.nav-pills').on('affixed-top.bs.affix', function() {
    $('.nav-pills').css("margin-top", 0);
});

问题是，当我向下滚动到affix-top更改为affix的位置并刷新页面时，加载的词缀在页面下方的位置大大低于应有的位置。为什么会发生这种情况，我该如何解决？

最佳答案

好吧，这是一个古老的问题，但答案将对某人有所帮助：

通过在初始化词缀之前添加事件侦听器，可以解决您的问题。

请参阅Github https://github.com/twbs/bootstrap/pull/14331中的线程

尝试这个：

// after changing from affix-top to affix
$('.nav-pills').on('affixed.bs.affix', function() {
    $('.nav-pills').css("margin-top", function() { return -$('#hero-unit').outerHeight(true)+10; } );
});

// after changing back to from affix to affix-top
$('.nav-pills').on('affixed-top.bs.affix', function() {
    $('.nav-pills').css("margin-top", 0);
});
$('.nav-pills').affix( {
    offset: { top: function() { return $('#hero-unit').outerHeight(true)+10; } }
});