Wie mein Element Fadeout, wenn ich

Question

verschiebe bis ich schön Parallaxe Website zu machen versuchen, aber dies ist mein erstes Mal, wenn ich jQuery verwende, aber ich habe folgendes Problem:

HTML:

<div class="section4"><h1 class="text-center">Online Marketing</h1></div> 
<div class="section4"><p style="text-align:justify">SOME TEXT IS HERE BUT IT DOES NOT IMPORTANT</p></div> 

CSS:

.section4 { 
    margin-bottom: 20px; 
    position: relative; 
    opacity: 0; 
    transform: translateX(-40px); 
} 
.is-showing{ 
    opacity: 1; 
    transform: translateX(0px); 
    transition: all 0.3s ease-in-out; 
} 
.is-hide { 
    opacity: 0; 
    position: relative; 
} 

JS:

var wScroll = $(this).scrollTop(); 
if($(window).scrollTop() > 800){ 

if (wScroll > $('.section4').offset().top - ($(window).height()/2.2)) { 
    $('.section4').each(function(i){ 

     setTimeout(function(){ 

      $('.section4').eq(i).addClass('is-showing'); 
     }, 250 * (i+1)); 
     }) 
} 
} 

Wenn ich also runterscrolle, ist es großartig. Es blendet sich richtig ein, aber jetzt will ich, wenn Benutzer hochscrollen, dazu verschwinden. Ich habe versucht, mit:

JS:

else { 
    $('.section4').eq().addClass('is-hide'); 
    })  

    //$('section4').fadeOut("slow"); 
} 
/*if (wScroll < $('.section4').offset().top + ($(window).height() - 500)) { 
    $('.section4').addClass('is-hide'); 

}*/ 

Und viele simular Beispiel, aber jetzt habe ich nicht Ahnung, wie es zu beheben, so dass, wenn jemand mir einen Rat geben kann, oder eine Lösung, die ich wird es zu schätzen wissen .

Answer 1

Falls Sie Dritte Lösung suchen Sie Wow.js

überprüfen können, ist es große leichte Bibliothek, die animate.css Auswirkungen auf Scrollen verwendet.

Answer 2

Wenn ich wollte Scroll-Richtung erkennen ,, Ich würde folgendes tun:

var lastScrollTop = 0; 
var isScrollingDown = false; 
$(window).scroll(function (event) { 
    var currentScrollTop = $(window).scrollTop(); 
    if (lastScrollTop > currentScrollTop) { 
     isScrollingDown = false; 
    } else { 
     isScrollingDown = true; 
    } 
    // Do something 
}); 

Sie diese Logik in Ihrem Code verwenden kann, je nach Bedarf zu tun.