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)
        }
    });
});

Answer 2

因为@Rick指出导航是不正确的 - 但是else语句也是如此 - 它应该删除else语句中的类。

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

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

顺便说一下 - 这可以通过三元语句很好地完成

$(function() {
  $(window).scroll(function() {
       $(window).scrollTop() > 300 ? $('.nav').addClass('shrink') : $('.nav').removeClass('shrink');
  });
});