Question

这是我遇到的问题。我想在我向下滚动时添加类，当我滚动时再次添加该类。我希望你能理解我的想法。

        HAVING     SUM(IF(s.skill='PHP', s.experience, 0)) > 2
        ... etc.

和CSS部分

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

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

Answer 1

是。通常会添加一次类。您可以使用元素本身的className属性来执行此操作，但我认为最好将计数器保留在数据属性中。

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

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

切换活动类应该可以使用您的代码。滚动条可以告诉您，示例页面中的所有块都在彼此之下。它只是在滚动时大幅跳跃，可能使用JavaScript。

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

仍然，基本功能有效。

$(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>

滚动时多次添加/ removeClass

1 个答案: