jQuery删除调整大小的类不起作用?

时间:2015-04-02 20:24:27

标签: jquery html5 css3

我现在真的很困惑,我认为我的代码还可以,但是这个类似乎没有删除。当窗口调整大小小于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");
     }
});

1 个答案:

答案 0 :(得分:0)

尝试在调整大小功能中删除“return”