jquery - addClass 不适用

Question

$(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”也无济于事。

Answer 1

您的目标不正确..

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

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