Jquery 创建一个固定导航，在滚动一小段距离后滑开，然后在向上滚动时返回

我试图创建一个固定导航，当用户向下滚动一小段距离后，它会滑开，然后在向上滚动后返回到固定视图。下面的代码在一定程度上起作用，但会跳跃，没有在导航上上下滚动时所获得的平滑幻灯片：

我的例子如下所示：

操场-

(function(){
    $(window).on('scroll.getDirection', getScrollDirection);

    var lastScrollTop = '',
        sticky      = $('#header'),
        stickyH     = sticky.height(),
        sensetivity = 16, // lower is more sensetive
        stickyPos   = 0,
        lastDownPos, delta, st;

    function getScrollDirection(){
        st = window.pageYOffset || document.documentElement.scrollTop;

        if( st > lastScrollTop ){  // && sticky.hasClass('sticky')
            // console.log( 'down' );

            if( stickyPos <= -stickyH && sticky.hasClass('sticky') ){
                stickyPos = -stickyH;
                sticky.removeClass('sticky').removeAttr('style');
            }
            else{
                sticky.css('top', stickyPos);
                stickyPos -= sensetivity / 2;
            }
            lastDownPos = st;
        }
        else{
            // console.log( 'up' );
            delta = Math.abs(lastDownPos - st);
            if( !sticky.hasClass('sticky') ){
                stickyPos = -stickyH;
                sticky.addClass('sticky').css({ position:'fixed', top: stickyPos });
            }
            else if( stickyPos < 0 ){
                stickyPos += (delta / sensetivity);
                if( stickyPos > 0 ) stickyPos = 0;
                sticky.css('top', stickyPos);
            }
        }
        lastScrollTop = st;
    }
})();

（函数（）{
$（窗口）.on（'scroll.getDirection'，getScrollDirection'）；
var lastScrollTop=''，
粘性=$（“#标题”），
stickyH=sticky.height（），
敏感度=16，//越低越敏感
stickyPos=0，
lastDownPos，三角洲，圣彼得堡；
函数getScrollDirection（）{
st=window.pageYOffset | | document.documentElement.scrollTop；
if（st>lastScrollTop）{/&&sticky.hasClass（'sticky'））
//console.log（'down'）；
如果（stickyPos 0）stickyPos=0；
css（'top'，stickyPos）；
}
}
lastScrollTop=st；
}
})();

谢谢你的想法。你的密码笔正是我想要的。然而，我的html和css的工作方式似乎破坏了功能。我希望有一种方法可以防止页面用我的代码在我的站点上向下滚动时出现丑陋的跳跃效果。它跳跃是因为页眉将其类更改为

滚动

，从而给出了is

位置：fixed

，它将页面布局范围之外，因此，您会突然出现“跳跃”。只需将其设置为

position:absolute

，并相应地更正布局，然后在滚动时将其更改为

fixed

。这太棒了，我将导航条的位置设置为absolute，然后在下方的条带上添加了一些边距顶部，这正是我的工作。非常感谢。

(function(){
    $(window).on('scroll.getDirection', getScrollDirection);

    var lastScrollTop = '',
        sticky      = $('#header'),
        stickyH     = sticky.height(),
        sensetivity = 16, // lower is more sensetive
        stickyPos   = 0,
        lastDownPos, delta, st;

    function getScrollDirection(){
        st = window.pageYOffset || document.documentElement.scrollTop;

        if( st > lastScrollTop ){  // && sticky.hasClass('sticky')
            // console.log( 'down' );

            if( stickyPos <= -stickyH && sticky.hasClass('sticky') ){
                stickyPos = -stickyH;
                sticky.removeClass('sticky').removeAttr('style');
            }
            else{
                sticky.css('top', stickyPos);
                stickyPos -= sensetivity / 2;
            }
            lastDownPos = st;
        }
        else{
            // console.log( 'up' );
            delta = Math.abs(lastDownPos - st);
            if( !sticky.hasClass('sticky') ){
                stickyPos = -stickyH;
                sticky.addClass('sticky').css({ position:'fixed', top: stickyPos });
            }
            else if( stickyPos < 0 ){
                stickyPos += (delta / sensetivity);
                if( stickyPos > 0 ) stickyPos = 0;
                sticky.css('top', stickyPos);
            }
        }
        lastScrollTop = st;
    }
})();