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

请查看此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;
}

解决方法

您必须声明一个附加变量,记录#header元素的原始垂直偏移量.当滚动事件触发时,此值将发生变化(因为固定位置会将偏移重置为0),我们将其声明为高于scroll事件的一个级别：

$(document).ready(function() {
    var prevIoUsScroll = 0,headerOrgOffset = $('#header').offset().top;

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

});

在这里看到概念证据 – http://jsfiddle.net/teddyrised/6zGx6/