Hinzufügen und Entfernen von Klassen abhängig vom Bildlaufereignis

Question

Ich möchte Klassen hinzufügen und entfernen, je nachdem, ob der Benutzer nach unten oder oben scrollt. Bisher habe ich das mit WheelDelta Event probiert. Es gibt keine Bildlaufleiste, die Seite verwendet 100vw und 100vw mit Überlauf ausgeblendet. Ich möchte etwas ähnliches erreichen: http://www.sound-of-change.com/#/intro/.

HTML

<div id="wrapper"> 
<div class="item-1"></div> 
<div class="item-2"></div> 
<div class="item-3"></div> 
<div class="item-4"></div> 
</div> 

CSS

#wrapper { 
width:100vw; 
height:100vh; 
overflow:hidden; 
} 

Also, wenn ein Benutzer scrollt Ich möchte hinzufügen zu können und entfernen Klassen für jedes Mal, wenn jemand scrollt nach unten oder oben.

Zum Beispiel kann der Benutzer 4 Mal nach unten oder oben scrollen. Und geht tatsächlich (abhängig von der Bildlaufrichtung) in der Aktionsliste nach oben oder unten.

Standard: Situation 0

Scroll down einmal -> Situation 1

Scroll wieder nach unten -> Situation 2

Aber wenn die Nutzer scrollt bis jetzt -> Situation 1 wird

ausgelöst werden

Scrollen Sie nach unten -> Zurück zur Situation 2

Scrollen Sie nach unten -> Situation 3

Bisher konnte ich nur ein Ereignis beim Scrollen nach oben und unten auslösen, aber das war's. Beispiel:

$('body').bind('mousewheel', function(e){ 
    if(e.originalEvent.wheelDelta /120 > 0) { 
       $(".cd-background-wrapper").css({'-webkit-filter': "grayscale(0%)"}); 
     $(".logo-text").removeClass("hide-logo"); 
     $(".logo-img").removeClass("come-closer"); 
    } 
    else{ 
     $(".cd-background-wrapper").css({'-webkit-filter': "grayscale(100%)"}); 
     $(".logo-text").addClass("hide-logo"); 
     $(".logo-img").addClass("come-closer"); 
    } 
}); 

Answer 1

Verwenden Sie einen Zähler zu wissen, welche Situation Sie sind, so etwas wie dieses:

var count = 1; 
 

 
$("body").on('mousewheel', function(e) { 
 
    if (e.originalEvent.wheelDelta/120 > 0) { 
 
    count -= 1; 
 
    } else { 
 
    count += 1; 
 
    } 
 
    if (count < 1) count = 1; 
 
    if (count > 4) count = 4; 
 

 
    switch (count) { 
 
    case 1: 
 
     // do something 
 
     break; 
 
    case 2: 
 
     // do something 
 
     break; 
 
    case 3: 
 
     // do something 
 
     break; 
 
    case 4: 
 
     // do something 
 
     break; 
 
    } 
 

 
    // Just a example that it works 
 
    $("#wrapper").attr("data-slide", count); 
 
});

body { 
 
    margin: 0; 
 
} 
 

 
[data-slide="1"] { 
 
    background-color: red; 
 
} 
 

 
[data-slide="2"] { 
 
    background-color: green; 
 
} 
 

 
[data-slide="3"] { 
 
    background-color: blue; 
 
} 
 

 
[data-slide="4"] { 
 
    background-color: orange; 
 
} 
 

 
#wrapper { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper" data-slide="1"></div>