滾動後將導航欄返回到原始位置

我已經設置了此頁面，因此當您滾動瀏覽導航欄的頂部時，它會變得粘滯並停留在頁面的頂部。滾動後將導航欄返回到原始位置

我希望當您回滾到頁面頂部時，它會恢復到原來的位置。

這是我現在工作的CodePen。我應該如何改變jQuery，使其恢復到原來的位置？

$(window).on('scroll', function() { 

    var $header = $("#header"), 
     scrollTop = $(window).scrollTop(), 
     elementOffset = $header.offset().top, 
     distance = (elementOffset - scrollTop); 

    if (distance < 0) { 
     $header.css({ 
      "position": "fixed", 
      "top": "0px", 
      "left": "0", 
      "right": "0" 
     }); 
    } 
});

現在，這是我改變標題元素轉換成固定一個爲用戶向下滾動頁面。

來源

2015-09-06 apizzimenti

認爲另一種方式的解決方案：

CSS

.affix { 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
}

if (distance < 0) { 
    $header.addClass("affix"); 
} else { 
    $header.removeClass("affix"); 
}

來源

2015-09-06 08:01:45

我已經試過這一點，它的工作原理，但是當你滾過這一點，沒有任何風格適用，它呈現爲直線HTML。就好像當我滾動過去那個刪除原始樣式的點，並且不添加新樣式，然後在向後滾動時重新添加它。 – apizzimenti

@apizzimenti也許你和類名有衝突，把'.affix'改成別的。 –

該類的應用程序正常工作，但在應用'.affix'類後滾動時，它會閃爍。我研究了開發人員工具，並且不斷在'.affix'和默認的'.header'類之間來回切換。我怎樣才能解決這個問題？ – apizzimenti

滾動後將導航欄返回到原始位置

回答

相關問題