修改

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插件来实现这个技巧。

Answer 3

我使用了您的代码，只是将.slideToggle()替换为.fadeIn和.fadeOut，效果很好。

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

3 个答案:

修改