我现在真的很困惑，我认为我的代码没问题，但类似乎没有被删除。我试过当窗口调整到小于 600px 时发出警报并且它有效但似乎无法删除该类。我要删除的类是触发 header 收缩效果的 .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");
}
});
最佳答案
尝试去掉resize函数中的“return”
关于jQuery 在调整大小时删除类不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29421819/