add/removeClass multiple times when scrolled

Here is my problem I ran into. I want to addClass when I'm scrolling down and when I scroll further add that class again. I hope you catch my idea what I'm trying to do.

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

and CSS part

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

I hear this is possible to do with counters, but I'm new to JQuery and I know basic of this language. Here is something what I'm trying to do: http://www.phasesmag.com

Solution

Yes. Classes are typically added once. You could probably do it using the className property of the element itself, but I think it's better to keep a counter in a data attribute.

However, adding a class multiple time is not going to make the CSS applies multiple times, so even if adding the class multiple times would work, or you could keep a counter in CSS, then still you wouldn't get the desired effect.

The page you posted seems to do it in a different way. It just changes the 'active' class on the elements, so that one element is always active. I haven't checked all scripts and CSS on it, but it seems that 'active' class is just a bookmark to remember which page is the current one.

Toggling the active class should be doable with your code already. The example page has all the blocks underneath each other as you can tell by the scrollbar. It just makes big jumps in scrolling, probably using JavaScript.

In the code below, I tried to mimic that. I used the function 'scrollIntoView'. Unfortunately, this function doesn't support animation in any other browser than FireFox, so it will just quickly jump between pages. To solve that, you can use jQuery plugins that can do an animated version of scrollIntoView.

Still, the basic functionality works.

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