爲什麼固定時粘滯的導航欄會跳起來？

我的網站是http://southsideonline.com/爲什麼固定時粘滯的導航欄會跳起來？

我只是有一個簡單的sticky.js修復了滾動條上的導航欄，但nav下面的內容跳轉到導航欄下方。任何想法如何解決這個問題？

jQuery(function(){ 
    var menuOffset = jQuery('.menu-wrapper')[0].offsetTop; 
    jQuery(document).bind('ready scroll',function() { 
    var docScroll = jQuery(document).scrollTop(); 
    if(docScroll >= menuOffset) { 
     jQuery('.menu-wrapper').addClass('fixed'); 
    } else { 
     jQuery('.menu-wrapper').removeClass('fixed').removeAttr("width"); 
    } 
    }); 
});

看起來像它的假設是一個簡單的修復。我嘗試使用jQuery .next（）將導航後的下一個.css的頁邊距放在適合導航條的位置。任何其他明智的想法？

來源

2014-07-25 Dlaugh14

你是什麼意思的下面的導航欄下跳轉到導航欄的內容？你是否指內容在滾動時位於導航欄下方？我在Chrome 36上看不到什麼不尋常的東西。 – John

您使用的是哪種瀏覽器？ –

沒關係我現在明白你的問題。我可以看到問題 – John

將您的<div class="menu-wrapper" id="menu-wrapper">換成另一個div（佔位符），並將height設置爲84px by CSS（等於固定菜單高度）或使用JS。你遇到了這個問題，因爲從位置計算中排除了固定的元素。

來源

2014-07-25 20:09:51

謝謝你！就是這樣。在爲所有屏幕尺寸進行修復的過程中......我只有一年左右的時間。在我的空閒時間，所以我一直在學習。萬分感謝！！！ – Dlaugh14

當您的導航變得粘滯/固定後，佈局的其餘部分在頁面上向上移動以填充導航在相對定位時（或最初使用流向）的空間。

來源

2014-07-25 20:03:16 Evan

這不是一個答案，這是對問題的描述。 –

添加靜態高度到你的頭，所以當導航欄失控流動，像這樣的東西它不會收縮：

header { height: 117px; }

爲我工作。

來源

2014-07-25 20:05:51

添加一個靜態高度似乎沒有幫助...謝謝 – Dlaugh14

下面的Andrei Baibakou更具體。我確實設置了一個高度，但我需要對佔位符div進行設置。雖然謝謝！ – Dlaugh14

這對我有效，因爲導航是在標題內。因此，即使導航變得粘稠並且不包含在高度計算中，標題保持相同的高度，因此其餘頁面元素的定位也是如此。謝謝！ – iluvpinkerton

爲什麼固定時粘滯的導航欄會跳起來？

回答

相關問題