javascript 如何在向下滚动时隐藏 div 然后向上滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29558930/
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 scroll up
提问by innovation
I want to make the case for showing and hiding menu like the picture.
我想像图片一样显示和隐藏菜单。
You can see in the following image there is a tree part. First part when you open the page the right bottom side menu will still showing.
您可以在下图中看到有一个树部分。第一部分当您打开页面时，右下侧菜单仍将显示。
When you scroll down then the menu will fadeIn, and when you sroll up then the menu will fadeOut.
向下滚动时，菜单将淡入淡出，向上滚动时，菜单将淡出。
The facebook and tumblr doing like this. I want to learn how can they do this. Anyone can tell me little example or something.
facebook 和 tumblr 就是这样做的。我想了解他们如何做到这一点。任何人都可以告诉我小例子什么的。
I created this DEMOfrom codepen.io but it is only header think and also there is a problem when scroll up.
我从 codepen.io创建了这个演示，但它只是标题思考，向上滚动时也有问题。
var previousScroll = 0, // previous scroll position
menuOffset = 54, // height of menu (once scroll passed it, menu is hidden)
detachPoint = 650, // point of detach (after scroll passed it, menu is fixed)
hideShowOffset = 6; // scrolling value after which triggers hide/show menu
// on scroll hide/show menu
$(window).scroll(function() {
if (!$('nav').hasClass('expanded')) {
var currentScroll = $(this).scrollTop(), // gets current scroll position
scrollDifference = Math.abs(currentScroll - previousScroll); // calculates how fast user is scrolling
// if scrolled past menu
if (currentScroll > menuOffset) {
// if scrolled past detach point add class to fix menu
if (currentScroll > detachPoint) {
if (!$('nav').hasClass('detached'))
$('nav').addClass('detached');
}
// if scrolling faster than hideShowOffset hide/show menu
if (scrollDifference >= hideShowOffset) {
if (currentScroll > previousScroll) {
// scrolling down; hide menu
if (!$('nav').hasClass('invisible'))
$('nav').addClass('invisible');
} else {
// scrolling up; show menu
if ($('nav').hasClass('invisible'))
$('nav').removeClass('invisible');
}
}
} else {
// only remove “detached” class if user is at the top of document (menu jump fix)
if (currentScroll <= 0){
$('nav').removeClass();
}
}
// if user is at the bottom of document show menu
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
$('nav').removeClass('invisible');
}
// replace previous scroll position with new one
previousScroll = currentScroll;
}
})
// shows/hides navigation's popover if class "expanded"
$('nav').on('click touchstart', function(event) {
showHideNav();
event.preventDefault();
})
// clicking anywhere inside navigation or heading won't close navigation's popover
$('#navigation').on('click touchstart', function(event){
event.stopPropagation();
})
// checks if navigation's popover is shown
function showHideNav() {
if ($('nav').hasClass('expanded')) {
hideNav();
} else {
showNav();
}
}
// shows the navigation's popover
function showNav() {
$('nav').removeClass('invisible').addClass('expanded');
$('#container').addClass('blurred');
window.setTimeout(function(){$('body').addClass('no_scroll');}, 200); // Firefox hack. Hides scrollbar as soon as menu animation is done
$('#navigation a').attr('tabindex', ''); // links inside navigation should be TAB selectable
}
// hides the navigation's popover
function hideNav() {
$('#container').removeClass('blurred');
window.setTimeout(function(){$('body').removeClass();}, 10); // allow animations to start before removing class (Firefox)
$('nav').removeClass('expanded');
$('#navigation a').attr('tabindex', '-1'); // links inside hidden navigation should not be TAB selectable
$('.icon').blur(); // deselect icon when navigation is hidden
}
// keyboard shortcuts
$('body').keydown(function(e) {
// menu accessible via TAB as well
if ($("nav .icon").is(":focus")) {
// if ENTER/SPACE show/hide menu
if (e.keyCode === 13 || e.keyCode === 32) {
showHideNav();
e.preventDefault();
}
}
// if ESC show/hide menu
if (e.keyCode === 27 || e.keyCode === 77) {
showHideNav();
e.preventDefault();
}
})
回答by Waltur Buerk
You might be looking for something like this? Whenever you scroll, it checks how far you've scrolled and in what direction from your previous scroll position.
你可能正在寻找这样的东西？每当您滚动时，它都会检查您滚动了多远以及从上一个滚动位置开始的方向。
var previousScroll = 0;
$(window).scroll(function(event){
var scroll = $(this).scrollTop();
if (scroll > previousScroll){
// downscroll code
} else {
// upscroll code
}
previousScroll = scroll;
});
Here's a little complimentary JSFuddle with some modification and live action application of that script: https://jsfiddle.net/d00h1zmn/4/
这是一个免费的 JSFuddle，对该脚本进行了一些修改和实况应用：https://jsfiddle.net/d00h1zmn/4/
回答by Cannicide
You could also use the onscrollattribute in HTML. For example, when you scroll down, element looks like this: <div id="header" class="sdown_concealed"></div>. Meanwhile, scroll up looks like this: <div id="header" class="sup_visible"></div>. It might be harder than using Jquery, but people who only want to use Javascript and no libraries can use a technique like this: <div id="header" class="unchanged" onscroll="scrollDown();"></div>. After scroll: <div id="header" class="sdown_concealed" onscroll="scrollUp(); this.onscroll = scrollDown;"></div>. It's a less simple solution, but I found it very helpful as I do not use Javascript Libraries such as Jquery (I should, though).
您还可以onscroll在 HTML 中使用该属性。例如，当你向下滚动，元素看起来像这样：<div id="header" class="sdown_concealed"></div>。同时，向上滚动看起来像这样：<div id="header" class="sup_visible"></div>。这可能是难度比使用jQuery，但人们谁只想使用JavaScript和没有库可以使用这样的技术：<div id="header" class="unchanged" onscroll="scrollDown();"></div>。滚动后：<div id="header" class="sdown_concealed" onscroll="scrollUp(); this.onscroll = scrollDown;"></div>. 这是一个不太简单的解决方案，但我发现它非常有用，因为我不使用 Javascript 库，例如 Jquery（不过我应该这样做）。
