Bootstrap導航欄粘貼屬性窗口調整大小後不準確

我遇到了一個涉及Bootstrap中的附加屬性的問題。使用下面的jQuery它功能完全正常，只要在向下滾動（如預期的）之後堅持頁面頂部。 該問題只發生在頁面加載後，然後窗口被調整爲VERTICALLY。在這一點上，導航欄不再在滾動時在正確的位置「粘」到頂部。查看DEMO網站HERE。Bootstrap導航欄粘貼屬性窗口調整大小後不準確

本質上，問題似乎是導航欄粘貼的高度在窗口加載後被賦值，並且如果頁面在此之後被垂直調整大小，則應該開始「粘貼」到頁面頂部的高度該頁面應該改變，但不改變。沒有在這裏的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它有效工作點。有什麼想法嗎？

來源

2014-07-27 Aender

這是你想要完成的嗎？ http://jsfiddle.net/jme11/2t5WB/這只是使用Bootstrap Scrollspy內置的行爲，沒有額外的JS。這是一個使用scrolltop的替代方法：http://jsfiddle.net/jme11/eY8nQ/對不起，也許對我來說有點太早了，但我沒有遵循上面的邏輯。 – jme11

我編輯希望澄清。你正在演示的「粘住」效果工作正常（導航欄低於主屏幕，因此可能有點混亂），問題只有在調整大小之後。 – Aender

我認爲你要完成的是在window.resize上動態更新你的導航欄的偏移量。如果那是真的，那麼這將會實現。

您有能力在初始化後更新詞綴插件的任何屬性。

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

來源

2014-10-29 15:36:16 mattybaer

Bootstrap導航欄粘貼屬性窗口調整大小後不準確

回答

相關問題