Question

我想在页面滚动上添加一个类。我成功完成了。现在我想在更多滚动上添加一个类。但我没有得到正确的方法。这是我的HTML代码。

$(window).scroll(function(event) {
  if ($(this).scrollTop() > 1) {
    $('header').addClass('shrink');
  } else {
    $('header').removeClass('shrink');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="container">
    <div class="logo">
      <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" alt="">
    </div>
    <nav>
      <ul>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
      </ul>
    </nav>
  </div>
</header>

滚动时添加了shrink类。它正在向后滚动删除。现在我想在更多页面滚动上添加另一个类。例如shrink-new。但我没有得到正确的方法。我想我错过了这个病。任何人请帮助这样做。我不是java的专家。所以请用你最简单的答案帮助我。我已经找到了很多关于此的答案。但我不理解这些。

Answer 1

要实现此目的，您只需添加另一个if语句，检查scrollTop()是否超过100px：

if ($(this).scrollTop() > 1) {
  $('header').addClass('shrink-new');
} else {
  $('header').removeClass('shrink-new');
}

另请注意，通过使用toggleClass()并提供一个布尔值来确定是应该添加还是删除类，可以使此逻辑更加简洁：

＆＃13;

$(window).scroll(function(event) {
  $('header').toggleClass('shrink', $(this).scrollTop() > 1);
  $('header').toggleClass('shrink-new', $(this).scrollTop() > 100);
});

＆＃13;

.shrink { zoom: 0.5; } 
.shrink-new { background-color: #C00; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="container">
    <div class="logo">
      <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" alt="">
    </div>
    <nav>
      <ul>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
      </ul>
    </nav>
  </div>
</header>

＆＃13;

Answer 2

要在滚动中获取新类，只需在jquery中使用.scroll函数

$(window).scroll(function(event) {
  $('header').toggleClass('shrink', $(this).scrollTop() > 1);
  $('header').toggleClass('shrink-new', $(this).scrollTop() > 100);
});

在滚动页面上添加两个类

2 个答案: