jQuery滾動到CSS上的div更改（粘性導航）

我正在使用我自己的代碼嘗試設置粘性導航。jQuery滾動到CSS上的div更改（粘性導航）

它的工作，但每當它將div更改爲固定，瀏覽器自動滾動到它。這意味着瀏覽器無法滾動任何比原始導航欄位置更遠的位置。

任何想法？當你的內容是恰到好處的高度，當你的粘元素設置爲position: relative，這是足夠高的垂直滾動，並從文檔的流動中取出時，內容不再是足夠高

$(document).ready(function() { 
    var stickNavOffset = $('#nav').offset().top; 

    function sticky() { 
     if ($(this).scrollTop() > stickNavOffset-1) { 
      $('#nav').css({position:'fixed',left:'auto'}); 
     } else { 
      $('#nav').css({position:'relative',left:'auto'}); 
     } 
    } 

    $(window).scroll(function() { 
     sticky(); 
    }); 
});

來源

2013-12-17 Tim Coysh

我很難理解你描述的問題。我用你的代碼做了一個快速[Fiddle]（http://jsfiddle.net/nate/LTznp/）（發佈問題時總是一個好主意）。它顯示你遇到的問題嗎？如果沒有，你可以調整它，以便它呢？ – Nate

是的，沒有。你是小提琴是對的，它工作正常。但在我的網站上它會自動滾動到頂部。我已經試過了我的筆記本電腦，並且不會發生此問題。在我的桌面上，即使在隱身窗口中也會出現問題。它是一個瀏覽器問題嗎？ –

它可能與瀏覽器行爲有關，但它仍然是您必須解決的問題。 :)所以：故障排除的基本技巧之一是隔離導致您的問題的元素。我們有一個小提琴設置工作正常，並有一個問題的網站。因此，現在是時候開始在您的網站上添加更多潛在元素，直到您可以重現您的問題。一旦你隔離導致問題的組件，你就是解決方案的3/4。 – Nate

你的問題發生強制滾動。

因此，當它切換到固定位置時，會回彈到頂部，因爲文檔的高度不足以滾動，這會將您的粘滯元素再次設置爲position: relative，這會將滾動條帶回。

您可以通過向頁面添加更多內容來測試它 - 如果它的高度足夠高，即使沒有粘性元素，它仍然會滾動，您將不會遇到此問題。

你應該注意到另一個的問題，但是，這是你的內容跳了一下。實際上，它突然跳到了粘性元素的高度，這突然不再存在。

這就是我的意見，當我說你必須用你的代碼來解釋這個空間。在過去，當我創建了粘性元素時，我創建了一個克隆的佔位符元素，我將其設置爲position: relative，我離開原位以便高度不會跳躍。

來源

2013-12-18 01:13:56 Nate

完美！對於那些有興趣的我添加了一個 '

' 之前的導航，與顯示：無。當粘性導航設置爲位置：固定;我顯示navfiller，並且在位置設置爲相對時隱藏它。 –

jQuery滾動到CSS上的div更改（粘性導航）

回答

相關問題