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

Question

我已設置此頁面，以便當您滾動到導航欄的頂部時，它會變得粘滯並停留在頁面頂部。

當您滾動回到頁面頂部時，我希望它返回到其原始位置。

這是我目前擁有的工作的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"
        });
    }
});

現在，這就是當用戶向下滾動頁面時將標題元素更改為固定元素的方式。

Answer 1

用另一種方式考慮解決方案：

的CSS

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

JS

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