jquery - addClass不适用

$(function() {
  $(window).scroll(function() {

    if ($(window).scrollTop() > 300) {
      $('nav').addClass('shrink');
      console.log(1);
    } else {
      $('nav').addClass('shrink');
      console.log(2)
    }
  });
});

.nav {
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #ffffff;
  box-shadow: 0px 1px 4px #555555;
  color: #000000;
  list-style: none;
  text-align: right;
  padding: 10px 0 10px 0;
  width: 100%;
  height: 50px;
  position: fixed;
  z-index: 99;
}

.shrink {
  height: 20px;
  background-color: #000000;
}

<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script src="app.js"></script>
<ul class="nav">
  <div class="logo">
    <a href=""> <img src="img/logo.png"></a>
  </div>
  <div class="name"> <a href=""> YE AN EDUCATION </a> </div>
  <li> <a href="#">HOME</a></li>
  <li> <a href="#">ABOUT</a></li>
  <li> <a href="#">SERVICES</a></li>
  <li> <a href="#">CONTACT</a></li>
</ul>

jQuery代码执行良好，所有if语句均正常运行。问题在于样式不适用，我不知道为什么。即使使用“！important”也无济于事。

最佳答案

您的目标不正确。

$('nav')应该是$('.nav')

$(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() > 300) {
            $('.nav').addClass('shrink');
            console.log(1);
        } else {
            $('.nav').addClass('shrink');
            console.log(2)
        }
    });
});

关于jquery - addClass不适用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42776566/