滚动时多次添加/删除类

Question

这是我遇到的问题。我想在向下滚动时添加类，当我进一步滚动时再次添加该类。我希望你能明白我想要做什么。

$(document).ready(function(){
    'use strict';

        $(window).bind('mousewheel DOMMouseScroll', function(event){
        if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
            // REMOVE
            $('li').removeClass('C');
        }
        else{
            // ADD
            $('li').addClass('C');
        }

        return false;
    });
    });

和 CSS 部分

.C
        {
        /* TRANSLATE */
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        /* TRANSITION */
        transition: all 0.6s ease;
        }

我听说这可能与计数器有关，但我是 JQuery 的新手，我知道这种语言的基本知识。 这是我想做的事情：http://www.phasesmag.com

Answer 1

是的。类通常添加一次。您可能可以使用元素本身的className 属性来做到这一点，但我认为最好在数据属性中保留一个计数器。

但是，多次添加一个类不会使 CSS 应用多次，所以即使多次添加类会起作用，或者你可以在 CSS 中保留一个计数器，但你仍然不会得到想要的效果。

您发布的页面似乎以不同的方式进行。它只是更改元素上的“活动”类，以便一个元素始终处于活动状态。我还没有检查它上面的所有脚本和 CSS，但似乎“活动”类只是一个书签，用于记住哪个页面是当前页面。

应该已经可以使用您的代码切换活动类。正如您可以通过滚动条看到的那样，示例页面的所有块都位于彼此下方。它只是在滚动方面取得了很大的进步，可能使用了 JavaScript。

在下面的代码中，我试图模仿它。我使用了“scrollIntoView”功能。不幸的是，该功能在除 FireFox 之外的任何其他浏览器中都不支持动画，因此它只会在页面之间快速跳转。为了解决这个问题，您可以使用 jQuery 插件来制作动画版本的 scrollIntoView。

不过，基本功能仍然有效。

$(document).ready(function() {
  'use strict';

  $(window).bind('mousewheel DOMMouseScroll', function(event) {
    var $active = $('li.active');
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
      var $new = $active.prev();
      $active.parent().removeClass('up');
      $active.parent().addClass('down');
    } else {
      var $new = $('li.active').next();
      $active.parent().addClass('up');
      $active.parent().removeClass('down');
    }
    
    if ($new.length > 0) {
      $active.removeClass('active');
      $new.addClass('active');
      
      // Here I call scrollIntoView of the element. However the options to add animation to it
      // are not widely supported, so it will jump instantly into view.
      // Here you could try to animate it using jQuery
      $new[0].scrollIntoView({
        behavior: "smooth", // or "auto" or "instant"
        block: "start" // or "end"
      });    
    }
    
    return false;
  });
});

html, body, ul, li {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
  margin: 0;
  height: 100vh;
  border:30px solid #ccc;
  box-sizing: border-box;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active">This is page 1. Welcome to you!</li>
  <li>This is page 2, where you first notice the scroll. The code snippt causes the parent page to jump too. Sorry.</li>
  <li>This is page 3, where nothing happens. </li>
  <li>This is page 4. Period.</li>
  <li>This is page 5, not the last one yet.</li>
  <li>This is page 6, concluding the presentation.</li>
  <li>This is page 7, the last one. Thank you. Bye!</li>
</ul>