[英]Nav show on scroll up
I copied this script from another website, and i'm not sure what i'm doing wrong here. 我从另一个网站复制了此脚本,但不确定在这里做错了什么。 The script is suppose to remove / add a class, but for some reason it is not working.
该脚本假定要删除/添加一个类,但是由于某种原因它无法正常工作。
I tested it on this url, and here it is working perfectly http://rubenkoops.nl/script_library/cms/content/01-home/nav_hide_on_scroll_html_preview/ 我在此url上对其进行了测试,在这里它可以正常运行http://rubenkoops.nl/script_library/cms/content/01-home/nav_hide_on_scroll_html_preview/
For some reason it is nog working on this url http://18493.hosts.ma-cloud.nl/ 由于某种原因,它在此网址上无法正常工作http://18493.hosts.ma-cloud.nl/
I got the feeling that i'm missing something really dumb, can anybody figure this out? 我感觉到我真的缺少一些愚蠢的东西,有人可以解决吗?
<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>
The problem is that the script expects a $("header")
element AKA: 问题在于该脚本期望使用
$("header")
元素:
<header></header>
but you have 但是你有
<div id="header"></div>
So you logically have two solutions. 因此,您在逻辑上有两个解决方案。
$("#header")
$("#header")
<header>
Element <header>
元素
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.