jquery - jQuery 中的 toggleClass 跳过 css 规则

Question

我有一个 id="header" 的 div，初始 css 规则:padding: 25px 0;。向下滚动页面时，我想减少此 div 的填充:

$(document).ready(function() {
  var headerID = $("#header");
  $(this).scroll(function() {
    if (!$(this).scrollTop()) 
      headerID.toggleClass("headerScrolled");
    else if (!headerID.is(".headerScrolled")) 
      headerID.toggleClass("headerScrolled");
  });
});

.headerScrolled {
  padding: 15px 0;
}

但是当我向下滚动页面时，填充不会改变。我的代码有什么问题？

Answer 1

您的两个条件相互抵消。对 toggleClass() 进行一次调用并提供 bool 参数以指定是否应根据当前 scrollTop 值添加或删除类更有意义。另请注意，您应该在 window 而不是 document 上监听滚动。试试这个:

$(document).ready(function() {
  var $header = $("#header");

  $(window).scroll(function() {
    $header.toggleClass('headerScrolled', $(this).scrollTop() !== 0);
  });
});

html,
body {
  height: 1000px;
  margin: 0;
}

#header {
  padding: 25px 0;
  background-color: #CCC;
  width: 100%;
  position: fixed;
}
#header.headerScrolled {
  padding: 15px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
  Header
</div>