窗口大小调整后，引导导航条附加属性不准确

Question

我遇到了一个问题，涉及到Bootstrap中的词缀属性。使用下面的jQuery，在向下滚动(如预期)后，它可以完全正常地保持在页面顶部。这个问题只发生在页面加载之后，然后窗口垂直调整大小。此时，滚动时导航条不再"粘"在正确的顶部。在这里查看演示站点。

本质上的问题似乎是，在导航栏成为固定的高度是在窗口加载后分配的，如果页面在那之后垂直调整大小，那么它应该开始"粘"到页面顶部的高度应该改变，但没有。JS中没有什么太复杂的:

//"sticky" nav bar
    $('#navbar').affix({
        offset: {
            top: $(window).height()
        }
    });
    $('#navbar').on('affix.bs.affix', function () {
        var navHeight = $('#navbar').outerHeight(true);
        $('#body').css('margin-top', navHeight);
    });
    $('#navbar').on('affix-top.bs.affix', function () {
        $('#body').css('margin-top', 0);
    });

我基本上只需要一种方法来让它在调整大小后"粘"的点发生变化，但我似乎无法让$(window).resize有效地使用它。任何想法吗?

Answer 1

我认为你想要完成的是在window.resize上动态更新导航栏的偏移量。如果这是真的，那么这将完成。

您可以在初始化后更新词缀插件的任何属性。

$(window).resize(function(){
    $('#navbar').data('bs.affix').options.offset = $('#navbar').offset().top;
});