[英]jquery addClass / removeClass not working with header
I have a fixed header as a navigation bar. 我有一个固定标题作为导航栏。 So when I scroll "in index page only" more or = to
200px
, the header changes from background: none;
因此,当我在“仅在索引页面中”滚动“或”=
200px
,标题将从background: none;
to background: #FFF;
到
background: #FFF;
and I wanted to add a shadow class with jquery when the scroll>=200px
. 当
scroll>=200px
时,我想用jquery添加一个阴影类。 But the changes did not apply after the scroll, however when I inspect the element, I find the class has been already added to the header. 但滚动后更改不适用,但是当我检查元素时,我发现该类已经添加到标题中。 On the other side, the same class apply when I add it for another element and scroll.
另一方面,当我将其添加到另一个元素并滚动时,同一类适用。
Any idea guys! 任何想法的家伙! Seems like my codes are great, but there is something missing.
好像我的代码很棒,但有些东西不见了。
Here are my codes: 这是我的代码:
HTML: HTML:
<header>
<a href="<?php echo hostName() ?>"><img src="<?php echo hostName() ?>/images/icon/dark-logo.png" class="main-logo"/></a>
<nav>
<ul class="clearfix">
<li><a href="#" class="search"><span></span></a></li>
<?php
if(isset($_SESSION['id']) && $_SESSION['type']=="admin")
{
?>
<li><a href="<?php echo hostName() ?>/php/functions/logout.php">logout</a></li>
<li><a href="<?php echo hostName() ?>/admin/dashboard" class="dashboard" target="_blank">dashboard</a></li>
<?php
}
?>
<li><a href="<?php echo hostName() ?>/about">about</a></li>
<li><a href="<?php echo hostName() ?>/explore">explore</a></li>
<li><a href="<?php echo hostName() ?>/courses">courses</a></li>
</ul>
</nav>
</header>
Js: JS:
var lastScrollTop = 0;
$(window).scroll(function(){
var st = $(this).scrollTop();
if (st >=200)
{
// down
$('.container > header').addClass("shadow").css({"background-color":"#FFF"});
$("header > a").fadeIn(200);
}
else
{
//up
$('.container > header').css({"background":"none"});
$("header > a").fadeOut(200);
}
lastScrollTop = st;
});
First, don't use CSS in your JS, unless you are looking for errors :-) Prefer toggle a class like that : 首先,不要在你的JS中使用CSS,除非你正在寻找错误:-)首选切换这样的类:
Keep your HTML. 保留你的HTML。 CSS :
CSS :
header{
width: 100%;
background:none;
position: fixed;
}
header.shadow{
background:none;
background-color: white;
box-shadow: 0px 1px 10px -3px black;
}
Is this JS : 这是JS :
$( document ).ready(function() {
var lastScrollTop = 0;
$(window).scroll(function(){
var st = $(this).scrollTop();
if (st >=200){
// down
$('.container > header').addClass("shadow");
$("header > a").fadeIn(200);
}else{
//up
$('.container > header').removeClass("shadow");
$("header > a").fadeOut(200);
}
lastScrollTop = st;
});
});
I don't know what you want to do with your link with fadeIn/fadeOut, sorry 我不知道你想用你的fadeIn / fadeOut链接做什么,抱歉
Démo : https://jsfiddle.net/ox8L0tfd/ Démo: https : //jsfiddle.net/ox8L0tfd/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.