仅在向上滚动时Jquery粘性导航

Question

请查看此JPG以供参考:

我的导航栏出现在页面顶部.我正在寻找的行为是:向上滚动时,相同的导航栏淡入并固定在屏幕顶部.

我在这里使用的代码是有效的,但我不确定如何设置一个规则,一旦你向上滚动到默认位置,就会阻止导航器粘到屏幕顶部.目前,使用下面的代码,即使向后滚动到页面顶部,导航仍会固定在顶部.

function () {
var previousScroll = 0;

$(window).scroll(function(){
   var currentScroll = $(this).scrollTop();
   if (currentScroll > previousScroll){
        $('#header').fadeOut();
   } else {
        $('#header').fadeIn();
        $('#header').addClass('fixed');
   }
   previousScroll = currentScroll;
});

我的CSS是:

.fixed {
    position: fixed;
    top: 0;
}

Answer 1

尝试这个。您可能还需要#header width根据您的结构 进行更改

var hdr = $('#header'); 

var off = {top: 150} //hdr.offset();

$(window).scroll(function(){
    if($(this).scrollTop() >= off.top)
        hdr.fadeIn('fast').css({position :'fixed', top: 0, left: 0});
    else
        hdr.fadeOut('fast')
})