jQuery 如何在向下滚动时隐藏 div，然后在向上滚动时显示它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17908542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide div when scrolling down and then show it as you scroll up?
提问by Maaz
Okay bear with me, I know this might have been asked a few times but I can't get the exact answer after searching a bit.
好吧，请耐心等待，我知道这可能已经被问过几次了，但经过一番搜索后我无法得到确切的答案。
Basically what I want is as the user starts to scroll down, after a certain height the div disappears.. and it remains disappeared until the user starts to scroll up. Right when the user starts to scroll up, the div appears again. I need some sort of fade effects for this as well.
基本上我想要的是当用户开始向下滚动时，在一定高度后 div 消失..并且它保持消失直到用户开始向上滚动。当用户开始向上滚动时，div 再次出现。为此，我也需要某种淡入淡出效果。
This is what I've come up with by looking at other answers so far. With this, the div does disappear after a certain height as you scroll down, but it only re-appears when you reach that same height when you scroll up. I want the div to immediately show itself when the user starts to scroll up. This code doesn't have any animations either...
到目前为止，这是我通过查看其他答案得出的结论。这样，当您向下滚动时，div 会在一定高度后消失，但只有在向上滚动时达到相同高度时它才会重新出现。我希望 div 在用户开始向上滚动时立即显示出来。此代码也没有任何动画...
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop()>0)
{
jQuery('.myDIV').fadeOut();
}
else
{
jQuery('.myDIV').fadeIn();
}
});
回答by jdepypere
I'm not the greatest JQuery-artist either, but I think this should work:
我也不是最伟大的 JQuery 艺术家，但我认为这应该有效：
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if(mywindow.scrollTop() > mypos)
{
$('.myDIV').fadeOut();
}
else
{
$('.myDIV').fadeIn();
}
mypos = mywindow.scrollTop();
});
You can see myposis updated every time the user scrolls, up or down.
您可以看到mypos每次用户向上或向下滚动时都会更新。
Edit
编辑
I've made some updates upon your request in a fiddle: http://jsfiddle.net/GM46N/2/. You can see in the js-part of the fiddle that I've made two options - one is with .fadeIn()and .fadeOut()(this time working - on your site the code I provided is not running), the second one is using .slideToggle().
我在小提琴中根据您的要求进行了一些更新：http: //jsfiddle.net/GM46N/2/。您可以在 fiddle 的 js 部分看到我做了两个选项 - 一个是使用.fadeIn()和.fadeOut()（这次工作 - 在您的网站上我提供的代码没有运行），第二个是使用.slideToggle().
Here's the updated js:
这是更新的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;
});
I've also added an extra variable, up, to only fire the events when the user scrolls up the first time and the next time the toggle gets fired is when he scrolls down and so on. Otherwise the events are fired maaaaany times (you can test it by using the previous code with .slideToggle()to see the massive amount of event-firing).
我还添加了一个额外的变量，up仅在用户第一次向上滚动时触发事件，下一次触发切换是在用户向下滚动时等等。否则，事件会触发 maaaaany 次（您可以使用前面的代码来测试它.slideToggle()以查看大量的事件触发）。
re-edit: I've also added .stop(), so now if there is still an effect running that effect gets stopped first, to prevent lag if a user quickly scrolls up&down.
重新编辑：我还添加了.stop()，所以现在如果仍有效果在运行，该效果将首先停止，以防止用户快速上下滚动时出现延迟。
回答by Nasim
You can try headroom.jswhich is a tiny little javascript plugin to do the trick.
您可以尝试使用headroom.js，这是一个很小的 javascript 插件来实现这一目标。
回答by uniqezor
I used your code, just replaced .slideToggle()with .fadeInand .fadeOutand it worked out great.
我使用了你的代码，只是替换.slideToggle()为.fadeIn和.fadeOut，效果很好。
