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

Answer 2

与luidgi27的代码相似，但动画流畅:)

- ＆GT; altered Fiddle

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
        $('nav').animate({height: "0px"}, 100);
   } else {
       $('nav').animate({height: "50px"}, 100);
   }
   lastScrollTop = st;
});

修改

我不确定你想要什么。稍微更改了代码，以便在显示导航时有步骤。

- ＆GT; new altered Fiddle

var lastScrollTop = 0;
var height = 50;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop && height > 0){
        $('nav').animate({height: "-=25px"}, 30);
       height = height - 25;
   } else if(st < lastScrollTop && height < 50){
       $('nav').animate({height: "+=25px"}, 30);
       height = height + 25;
   }
   lastScrollTop = st;
});

EDIT2

- ＆GT; new altered Fiddle 2

在这里，您将获得第三个也是最准确的隐藏效果。

var lastScrollTop = 0;
var diffrence = 0;
var height = 50;
var isGrowing = false;
var isShrinking = false;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
    diffrence = st - lastScrollTop;
    $('#debug').html(diffrence + "<br />" + height + "<br />" + $('nav').height());
   if (diffrence > 0 && height < 50 && !isGrowing){
       if((diffrence + height) > 50){
           height = 50;
           isGrowing = true;
           $('nav').stop().animate({height: "50px"}, 100, function(){
           isGrowing = false;
           });
       }else{
           height = height + diffrence;
            $('nav').animate({height: "+="+diffrence+"px"}, 0);
       }
   } else if(diffrence < 0 && $('nav').height() > 0 && !isShrinking){
       if((diffrence + height) < 0){
           height = 0;
           isShrinking = true;
           $('nav').stop().animate({height: "0px"}, 100, function(){
           isShrinking = false;
           });
       }else{
           height = height + diffrence;
           diffrence = diffrence*-1;
           $('nav').animate({height: "-="+diffrence+"px"}, 0)
       }       
   }
   lastScrollTop = st;
});

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

2 个答案:

修改

EDIT2