我的菜单机器人是:
<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>
上面的脚本是我尝试用来隐藏菜单的内容。 菜单页脚的CSS是:
#menu-footer {
width: 100%;
background: #5f6f81;
position: fixed;
bottom: 0;
transition: top 0.2s ease-in-out;
z-index: 100
}
使这个脚本有效,我错过了什么?如果您有其他解决方案,那将会很有帮助。
答案 0 :(得分:20)
我在普通的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>
更新:根据评论的要求,第二个片段在向上/向下滚动时显示/隐藏菜单,无论条形图的当前位置如何(查找方向,滚动条被激活时)将当前位置与先前位置进行比较,然后将当前位置存储在要在下一个滚动事件中进行比较的变量中:
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>
scroll direction code
答案 1 :(得分:4)
基本上你需要使用3个主要想法来实现这个目标。
这是来自Marius Craciunoiu的demo
Html:
<header class="nav-down">
This is your menu.
</header>
<main>
This is your body.
</main>
<footer>
This is your footer.
</footer>
使用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:
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}