12

好的，请耐心等待，我知道这可能已被问过几次，但经过一番搜索后我无法得到确切的答案。

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

到目前为止，这是我通过查看其他答案得出的结论。这样，当您向下滚动时，div 会在一定高度后消失，但只有在您向上滚动时达到相同高度时才会重新出现。我希望 div 在用户开始向上滚动时立即显示出来。此代码也没有任何动画...

jQuery(window).scroll(function() {

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

3 回答 3

27

我也不是最伟大的 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 部分中看到我做了两个选项 - 一个是 with.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仅在用户第一次向上滚动时触发事件，而下一次触发切换是当他向下滚动时等等。否则，事件会在任何时候触发（您可以通过使用前面的代码来测试它.slideToggle()以查看大量的事件触发）。

重新编辑：我还添加了.stop()，所以现在如果仍然有运行效果，该效果会首先停止，以防止用户快速上下滚动时出现滞后。

于 2013-07-28T13:35:34.593 回答
17

你可以试试headroom.js，这是一个很小的 ​​javascript 插件来解决这个问题。

于 2014-02-12T07:36:01.383 回答
0

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

于 2014-07-06T20:22:23.453 回答