[英]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){
$("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
}
我想讓這個腳本工作的是什么? 如果你有另一個解決方案,那將會很有幫助。
我在普通的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>
基本上你需要使用3個主要想法。
以下是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:
// 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}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.