調整窗口大小后，Bootstrap導航欄附加屬性不正確

Question

我遇到了涉及Bootstrap中affix屬性的問題。 使用下面的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上動態更新導航欄的偏移量。 如果那是真的，那將會做到。

初始化后，您可以更新affix插件的任何屬性。

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