javascript - 根据滚动更改固定元素的最高值

Question

我喜欢创建一种效果，让我的导航栏在向下滚动时隐藏，但在向上滚动时出现，无论您向下滚动多远。 我已经设法做到这一点 jsfiddle ，但我从那里迷路了。 导航 div 具有 position: fixed 和 top: 0。我为每个向下滚动的像素数减少了 top。但目前，无论您向下滚动多远，我都没有洞察力来为每个向上滚动的像素数增加 top。

我希望我想达到的目标足够清楚。

jQuery

var topScroll = 0;
$(document).scroll(function () {
    var scrolled = $(this).scrollTop();
    if (scrolled > $('nav').height()) {
        $('nav').css('top', ($('nav').height() - scrolled));
    }
    if (topScroll > scrolled) {
        //scrolling up
    } else {
        //scrolling down
    }
    topScroll = scrolled;
});

-

编辑

我想我需要一种在滚动方向改变时保存 scrollTop() 值的方法，然后添加该数字与新的 scrollTop() 之间的差异到我的导航栏的 top 值。我只是不知道该怎么做。

Answer 1

这是你想要的吗？

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
        $('nav').css('display', 'none');
   } else {
       $('nav').css('display', 'block');
   }
   lastScrollTop = st;
});