如何在向下滚动时隐藏div,然后在向上滚动时显示div？

Question

好吧,我知道,我知道这可能会被问过几次,但是在搜索之后我无法得到确切的答案.

基本上我想要的是当用户开始向下滚动,在一定高度后div消失..并且它一直消失,直到用户开始向上滚动.当用户开始向上滚动时,div再次出现.我也需要某种淡入淡出效果.

到目前为止,通过查看其他答案,我已经想到了这一点.有了这个,当你向下滚动时,div会在一定高度后消失,但只有当你向上滚动时达到相同的高度时它才会重新出现.我希望div在用户开始向上滚动时立即显示.此代码也没有任何动画......

jQuery(window).scroll(function() {

    if (jQuery(this).scrollTop()>0)
     {
      jQuery('.myDIV').fadeOut();  
     }
    else
     {
      jQuery('.myDIV').fadeIn();
     }
 });

Answer 1

我也不是最伟大的JQuery艺术家,但我认为这应该有效:

var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
    if(mywindow.scrollTop() > mypos)
    {
        $('.myDIV').fadeOut();  
    }
    else
    {
        $('.myDIV').fadeIn();
    }
    mypos = mywindow.scrollTop();
 });

mypos每次用户向上或向下滚动时,您都可以看到更新.

编辑

我已经根据你的请求做了一些更新:http://jsfiddle.net/GM46N/2/.你可以在小提琴的js-part中看到我做了两个选项 - 一个是.fadeIn()和.fadeOut()(这次在你的网站上工作 - 我提供的代码没有运行),第二个是使用.slideToggle().

这是更新的js:

var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var newscroll;
mywindow.scroll(function () {
    newscroll = mywindow.scrollTop();
    if (newscroll > mypos && !up) {
        $('.header').stop().slideToggle();
        up = !up;
        console.log(up);
    } else if(newscroll < mypos && up) {
        $('.header').stop().slideToggle();
        up = !up;
    }
    mypos = newscroll;
});

我还添加了一个额外的变量,up仅在用户第一次向上滚动时触发事件,下次触发切换时是向下滚动等等.否则,事件会在maaaaany时间被触发(您可以使用前面的代码来测试它,.slideToggle()以查看大量的事件触发).

重新编辑:我也添加了.stop(),所以现在如果仍然有效果,那么效果会先停止,以防止用户快速向上和向下滚动时出现延迟.

Answer 2

你可以试试headroom.js这是一个小小的javascript插件来做这个技巧.