好吧，跟我一起，我知道这可能已被问了几次，但我找不到确切的答案后，搜索了一下。如何向下滚动时隐藏div，然后在向上滚动时显示它？

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

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

jQuery(window).scroll(function() { 

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

来源

2013-07-28 Maaz

一个选项是将'.scrollTop（）'值存储在一个额外的变量中。然后当滚动时，检查新的'.scrollTop（）'是否大于或小于存储的值，并做相应的事情并存储新的值。 – jdepypere

唯一的问题是，我用jQuery不太好。 – Maaz

'jQuery（this）.scrollTop（）> 0' ??你什么时候认为你的scrollTop将会小于'0' – exexzian

你可以尝试headroom.js这是一个小小的JavaScript插件来做的伎俩。

来源

2014-02-12 07:36:01 Nasim

链接不是答案。这是一个很好的插件，顺便说一句....和平:) – PJunior

我不是最伟大的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部分看到我已经提出了两个选择 - 一个是.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-28 13:35:34 jdepypere

这个效果很好。我将如何去添加一些淡入/淡出效果？目前它只是出现或消失。我是否有可能喜欢将它从顶部拉出来，然后当它消失时，它会自动移动到顶部？（这是一个菜单）。 – Maaz

目前您正在使用'.fadeIn（）'和'.fadeOut（）'。要做你想做的事，可以使用多个选项你可以使用[.slideToggle（）]（http://api.jquery.com/slideToggle/），检查链接的效果。这看起来有点奇怪，所以如果你只是希望它完全滑动而不是像'.slideToggle（）'那样'展开'，我使用的是[.animate（）]（http：// api .jquery.com/animate /）并编辑'top'css，如下所示：'$（'。something'）。animate（{top：“10px”}）;'。 – jdepypere

你不得不向我展示一些实际答案中的例子。我尝试过.animate，并且需要时间才能在向上滚动时实际移动，我认为这是因为您使用向上滚动位置的方式并在用户每次滚动时更新变量。 – Maaz

我用你的代码，只需用代替.fadeIn和.fadeOut，结果很好。

来源

2014-07-06 20:22:23 uniqezor

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

回答

编辑

相关问题