当我向下滚动或向上滚动时如何显示或隐藏菜单？ [英] How to show or hide a menu when I scroll down or up?
本文介绍了当我向下滚动或向上滚动时如何显示或隐藏菜单？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我向下滚动来隐藏这个菜单，并且当我滚动显示时。
我的菜单机器人是：
< script>
var previousScroll = 0;
$（window）.scroll（function（event）{
var scroll = $（this）.scrollTop（）;
if（scroll> previousScroll）{
$（ （'：not（：animated）'）。slideUp（）;
} else {
$（menu-footer）。filter（'：not（： ）;）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>
< a class =<？php echo $ nearby_active;？> href =＃id =search-nearby>< i class =fa fa-compass>< / i><？php _e（Nearby，ET_DOMAIN）; ？>< / A>
< form id =nearbyaction =<？php echo get_post_type_archive_link（'place'）？> method =get>
< input type =hiddenname =centerid =center_nearby/>
< / form>
< / li>
<！ - < li>< a href =＃>< i class =fa fa-plus>< / i>提交< / 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广告，ET_DOMAIN）; ？>< / A>< /锂>
<？php if（has_nav_menu（'et_mobile_header'））{？>
< li>
< li>< a href =＃class =search-btn>< i class =fa fa-search-plus>< / i><？php _e （搜索，ET_DOMAIN）; ？>< / A>< /锂>
< / li>
< li>
< a href =javascript：history.back（）>< i class =fa fa-refresh>< / i><？php _e（Refresh，ET_DOMAIN） ; ？>< / A>
< / li>
<？php}？>
< / ul>
< / section>
上面的脚本是我尝试用来隐藏菜单的。
我的CSS菜单页脚是：
＃menu-footer {
width：100％;
背景：＃5f6f81;
位置：固定;
bottom：0;
过渡：最高0.2秒缓出;
z-index：100
}
我错过了什么脚本工作？如果您有另一种解决方案，这将是有帮助的。
解决方案
我在简单的Javascript中创建了第一个示例，快速了解代码。它根据滚动条的位置（当滚动条距离顶部超过0像素时）隐藏菜单，改变CSS样式的'bottom'属性（从0到-100）。如果滚动条回到顶部（0px），菜单再次显示（从-100到0）。一个CSS过渡效果动画变化：
window.addEventListener（scroll ，drawmenu）; function drawmenu（）{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;背景：薰衣草;}＃bottommenu {position：fixed;底部：0;宽度：100％;身高：自动;背景：番茄; -webkit转换：底部2s; transition：bottom 2s;}
< div id = content> ;< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p为H.内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H. < p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< < p>< p>< p>< p>内容< / p>< p>内容< / p>< p>内容>< span> / span>< span> bottom< / span>< span> bottom< / span>< span> bottom< / span>< br>< span> bottom< / span>< span> ;底部< / span>< span>底部< / span>< span>底部< / span>< / div>
更新：根据评论的要求，此第二个片段在向上/向下滚动时会带来/隐藏菜单，而不管该栏的当前位置（要查找方向，被激活，它将当前位置与之前的位置进行比较，然后将当前位置存储在下一个滚动事件中要比较的变量中）：
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; }
body {保证金：0;背景：honeydew;}＃bottommenu {position：fixed;底部：0;宽度：100％;身高：自动;背景：hotpink; -webkit转换：底部2s; transition：bottom 2s;}
< div id = content> ;< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p为H.内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H. < p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< / p为H.< p>内容< < p>< p>< p>< p>内容< / p>< p>内容< / p>< p>内容>< span> / span>< span> bottom< / span>< span> bottom< / span>< span> bottom< / span>< br>< span> bottom< / span>< span> ;底部< / span>< span>底部< / span>< span>底部< / span>< / div>
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:
#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.
解决方案
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:
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>
这篇关于当我向下滚动或向上滚动时如何显示或隐藏菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
