滚动后将导航栏返回到原始位置

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"); 
}