1
我在我的博客上有一個固定位置的導航欄,我試圖實現簡單的JS以在向下滾動時隱藏導航欄。滾動時,導航欄將重新出現。我試圖在這裏實現代碼的小提琴:https://jsfiddle.net/mariusc23/s6mLJ/31/在滾動上實現隱藏導航欄的問題-JS
由於某種原因,我遇到了問題,我撞到了牆上。如果有人願意幫忙,這裏是我的代碼。問題可能是我的導航欄的響應版本嗎?任何線索表示讚賞。
// 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;
}
.nav-up {
top: -40px;
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<script src="/javascript/navhider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<!--NAVBAR-->
<aside id="shadow" class="nav-down">
<div id="navbar">
<nav>
<ul> \t \t \t \t
<li class="noselect"><a href="/">Home</a></li>
<li class="noselect"><a class="navlink" href="{{ "/contact" | prepend: site.baseurl }}">Contact</a></li>
<li class="noselect"><a class="navlink" href="{{ "/portfolio" | prepend: site.baseurl }}">Portfolio</a></li>
<li class="noselect"><a class="navlink" href="https://github.com/joelbitar1986">Github</a></li>
<li class="noselect"><a class="navlink" href="{{ "/blog" | prepend: site.baseurl }}">Blog</a></li> \t \t \t \t
</ul>
<div class="handle"><a id="menu-icon">☰</a></div><!--On a mobile device this is the only list item displaying -->
</nav>
</div>
</aside>