Javascript 向下或向上滚动时如何显示或隐藏菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36448800/
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 show or hide a menu when I scroll down or up?
提问by Vladut
When I am scrolling down to hide this menu and when I am scrolling up to show this.
当我向下滚动以隐藏此菜单以及向上滚动以显示此菜单时。
My menu bot is:
我的菜单机器人是：
<script>
var previousScroll = 0;
$(window).scroll(function(event){
var scroll = $(this).scrollTop();
if (scroll > previousScroll){
$("menu-footer").filter(':not(:animated)').slideUp();
} else {
$("menu-footer").filter(':not(:animated)').slideDown();
}
previousScroll = scroll;
});
</script>
<section id="menu-footer">
<ul>
<li>
<li><a href="javascript:history.back()"><i class="fa fa-arrow-circle-left"></i><?php _e("Back", ET_DOMAIN); ?></a></li>
</li>
<li>
<a class="<?php echo $nearby_active; ?>" href="#" id="search-nearby"><i class="fa fa-compass"></i><?php _e("Nearby", ET_DOMAIN); ?></a>
<form id="nearby" action="<?php echo get_post_type_archive_link('place') ?>" method="get" >
<input type="hidden" name="center" id="center_nearby" />
</form>
</li>
<!--<li><a href="#"><i class="fa fa-plus"></i>Submit</a></li>-->
<!--<li>
<a class="<?php echo $review_active; ?>" href="<?php echo et_get_page_link('list-reviews') ?>">
<i class="fa fa-comment"></i><?php _e("Reviews", ET_DOMAIN); ?>
</a>
</li>-->
<li><a class="<?php echo $post-place; ?>" href="<?php echo et_get_page_link('post-place')?>"><i class="fa fa-flag-checkered"></i><?php _e("Post an Ad", ET_DOMAIN); ?></a></li>
<?php if(has_nav_menu('et_mobile_header')) { ?>
<li>
<li><a href="#" class="search-btn"><i class="fa fa-search-plus"></i><?php _e("Search", ET_DOMAIN); ?></a></li>
</li>
<li>
<a href="javascript:history.back()"><i class="fa fa-refresh"></i><?php _e("Refresh", ET_DOMAIN); ?></a>
</li>
<?php } ?>
</ul>
</section>
The script above is what I try to use for hiding my menu. My CSS for menu-footer is:
上面的脚本是我尝试用于隐藏菜单的脚本。我的菜单页脚 CSS 是：
#menu-footer {
width: 100%;
background: #5f6f81;
position: fixed;
bottom: 0;
transition: top 0.2s ease-in-out;
z-index: 100
}
What am I missing to make this script working? If you have another solution for me it will be helpful.
我缺少什么才能使此脚本正常工作？如果您对我有其他解决方案，那将很有帮助。
回答by Le____
I made this first example in plain Javascript to let it easy to understand with a quick look in the code. It hides the menu changing the 'bottom' attribute of the CSS style (from 0 to -100) according to the scrollbar's position (when the scrollbar is more than 0 pixels from the top). The menu shows up again (from -100 to 0) if the scrollbar comes back to the top (0px). A CSS transition effect animates the change:
我用纯 Javascript 制作了第一个示例，以便通过快速查看代码使其易于理解。它隐藏菜单，根据滚动条的位置（当滚动条距顶部超过 0 像素时）更改 CSS 样式的“底部”属性（从 0 到 -100）。如果滚动条回到顶部 (0px)，菜单会再次显示（从 -100 到 0）。CSS 过渡效果为更改设置动画：
window.addEventListener("scroll", bringmenu);
function bringmenu() {
if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
document.getElementById("bottommenu").style.bottom = "-100%";
} else {
document.getElementById("bottommenu").style.bottom = "0";
}
}body {
margin: 0;
background: lavender;
}
#bottommenu {
position: fixed;
bottom: 0;
width: 100%;
height: auto;
background: tomato;
-webkit-transition: bottom 2s;
transition: bottom 2s;
}<div id=content>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
</div>
<div id=bottommenu>
<span>bottom </span><span>bottom </span><span>bottom </span><span>bottom </span><br><span>bottom </span><span>bottom </span><span>bottom </span><span>bottom </span>
</div>Update:As requested on the comments, this second snippet brings/hides the menu when scrolling up/down, regardless of the bar's current position (to find the direction, when the scroll is activated it compares the current position with the previous position then stores the current position in a variable to be compared in the next scroll event):
更新：根据评论的要求，无论栏的当前位置如何，第二个片段在向上/向下滚动时都会显示/隐藏菜单（为了找到方向，当滚动被激活时，它会将当前位置与前一个位置进行比较，然后存储要在下一个滚动事件中比较的变量中的当前位置）：
var lastScrollTop = 0;
window.addEventListener("scroll", function(){
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop){
document.getElementById("bottommenu").style.bottom = "-100%";
} else {
document.getElementById("bottommenu").style.bottom = "0";
}
lastScrollTop = st;
}, false);body {
margin: 0;
background: honeydew;
}
#bottommenu {
position: fixed;
bottom: 0;
width: 100%;
height: auto;
background: hotpink;
-webkit-transition: bottom 2s;
transition: bottom 2s;
}<div id=content>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
</div>
<div id=bottommenu>
<span>bottom </span><span>bottom </span><span>bottom </span><span>bottom </span><br><span>bottom </span><span>bottom </span><span>bottom </span><span>bottom </span>
</div>回答by claudios
Basically you need to get this using 3 main ideas.
基本上，您需要使用 3 个主要想法来实现这一点。
- Set menu/header to fixed.
- When scrolling down, add a class to remove the header/menu.
- When scrolling up, remove the class that hides the header/menu.
- 将菜单/标题设置为固定。
- 向下滚动时，添加一个类以删除标题/菜单。
- 向上滚动时，删除隐藏标题/菜单的类。
Here is a demofrom Marius Craciunoiu
这是 Marius Craciunoiu的演示
Html:
网址：
<header class="nav-down">
This is your menu.
</header>
<main>
This is your body.
</main>
<footer>
This is your footer.
</footer>
Javascript:
Javascript：
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
CSS:
CSS：
body {
padding-top: 40px;
}
header {
background: #f5b335;
height: 40px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -40px;
}
main {
background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=
) repeat;
height: 2000px;
}
footer { background: #ddd;}
* { color: transparent}
