窗口调整大小后引导导航栏附加属性不准确答案

【问题标题】：Bootstrap navigation bar affix property not accurate after window resize窗口调整大小后引导导航栏附加属性不准确
【发布时间】：2014-10-29 23:36:16
【问题描述】：

我遇到了涉及 Bootstrap 中的 affix 属性的问题。使用下面的 jQuery，它的功能完全没问题，只要在向下滚动后（如预期的那样）粘在页面顶部。 该问题仅在页面加载后发生，然后垂直调整窗口大小。此时导航栏在滚动时不再“粘”在正确位置的顶部。查看演示站点HERE。

基本上问题似乎是在窗口加载后分配导航栏的高度，如果页面在此之后垂直调整大小，那么它应该开始“粘贴”到顶部的高度页面应该改变，但不会。这里的 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 有效地使用它。有什么想法吗？

【问题讨论】：

这是您想要完成的任务吗？ jsfiddle.net/jme11/2t5WB 这只是使用 Bootstrap scrollspy 的内置行为，没有额外的 JS。这是使用滚动顶部的另一种方法：jsfiddle.net/jme11/eY8nQ 抱歉，对我来说可能有点太早了，但我没有遵循您上面的逻辑。
我编辑希望澄清。您展示的“粘滞”效果很好（导航栏位于主页启动画面下方，因此可能有点混乱），问题仅在调整大小之后。

标签： jquery twitter-bootstrap window-resize

【解决方案1】：

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

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

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

【讨论】：