[英]Nav show on scroll up
我從另一個網站復制了此腳本,但不確定在這里做錯了什么。 該腳本假定要刪除/添加一個類,但是由於某種原因它無法正常工作。
我在此url上對其進行了測試,在這里它可以正常運行http://rubenkoops.nl/script_library/cms/content/01-home/nav_hide_on_scroll_html_preview/
由於某種原因,它在此網址上無法正常工作http://18493.hosts.ma-cloud.nl/
我感覺到我真的缺少一些愚蠢的東西,有人可以解決嗎?
<style type="text/css">
header {
background: #f5b335;
height: 40px;
position: fixed;
top: 0;
left: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -40px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(function(){
// 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;
}
});//]]>
</script>
<header class="nav-down">
Dit is het menu
</header>
問題在於該腳本期望使用$("header")
元素:
<header></header>
但是你有
<div id="header"></div>
因此,您在邏輯上有兩個解決方案。
$("#header")
<header>
元素
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.