add/removeClass 滚动时多次

Question

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

$(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 属性来完成它，但我认为最好在数据属性中保留一个计数器。

但是，多次添加 class 不会使 CSS 应用多次，因此即使多次添加 class 也可以，或者您可以保留CSS 中的一个计数器，那么您仍然无法获得预期的效果。

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

切换活动 class 应该已经可以使用您的代码。示例页面的所有块都位于彼此下方，您可以通过滚动条看出这一点。它只是在滚动时有很大的跳跃，可能使用 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>

add/removeClass 滚动时多次

add/removeClass multiple times when scrolled

jquery

css

class

addclass

translate