我现在真的很困惑,我认为我的代码还可以,但是这个类似乎没有删除。当窗口调整大小小于600px并且它工作但我似乎无法删除该类时,我已经尝试过警报。我要删除的类是.darkheader类,它触发标头收缩效果。当窗口调整为平板电脑或移动设备尺寸时,我想删除以删除该效果。
HTML
<!DOCTYPE html>
<html>
<head>
<title>IT'S RENDELL</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
</head>
<body>
<div class="wrapper">
<nav>
<header class="clearHeader">
<ul>
<li>Blog<li>
<li>My works<li>
<li>Resume</li>
<li>Contact</li>
</ul>
</header>
</nav>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1
/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.wrapper{
height: 2000px;
}
.clearHeader{
height: 100px;
background: #CF000F;
position: fixed;
top:200;
width: 100%;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.clearHeader ul{
text-align: center;
line-height: 100px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.clearHeader ul li{
display: inline;
padding: 10px;
color: #FFF;
font-weight: bold;
font-family: Tahoma
}
.darkHeader {height: 50px;}
.darkHeader ul {line-height: 50px;}
.wrapper {
height:2000px;
}
的jQuery
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
});
$(window).resize(function(){
if($(this).width() < 600){
return $(".clearHeader").removeClass("darkHeader");
}
});
答案 0 :(得分:0)
尝试在调整大小功能中删除“return”