Question

我已经配置了一个主要有效的词缀，如本页所示：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并且我刷新页面的地方，加载的词缀在页面下方比它应该低很多。为什么会发生这种情况？我该如何解决？

Answer 1

嗯，这是一个老问题，但答案会对某人有所帮助：

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

请参阅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; } }
});

页面刷新后Bootstrap 3附加位置

1 个答案: