Question

我遇到了一个涉及Bootstrap中的词缀属性的问题。使用下面的jQuery，只要在向下滚动（如预期）后粘到页面顶部就可以完全正常工作。 问题仅在页面加载后才会出现，然后垂直调整窗口大小。此时导航栏不再是＆＃34;粘贴＆＃34;滚动时在正确的位置到顶部。查看演示场所HERE。

基本上问题似乎是导航栏粘贴的高度是在窗口加载后分配的，如果页面在此之后垂直调整大小，那么它应该开始的高度＆＃34;粘贴＆＃34;到页面顶部应该改变，但不是。这里的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);
    });

我基本上只需要一种方法来确定它是什么＆＃34;坚持＆＃34;调整大小后更改，但我似乎无法让$(window).resize有效地使用它。有什么想法吗？

Answer 1

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

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

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

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

1 个答案: