Wie kann ich die Klasse eines divs ändern, wenn ich mit jquery 200px vom oberen Fensterrand aus erreiche?

Question

Ich habe 5 Boxen auf einer Webseite, die Sie hier sehen können:

http://demo.axistheme.com/methodology/Wakeup-Method.html.

Die erste Box hat den Text 01 mit einer gelben Hintergrundfarbe und die zweite und die anderen haben den Text 02, 03 usw. mit einer grauen Hintergrundfarbe.

Wie kann ich beim Scrollen des Fensters die Hintergrundfarbe jedes anderen Kästchens (einzeln) an dem Punkt ändern, an dem sie 200 Pixel unter dem oberen Rand des Fensters erreichen?

Answer 1

Sie müssen überprüfen, wann immer das Fenster gescrollt wird, wenn eines der Elemente weniger als 200px vom oberen Teil des Ansichtsfensters ist.

Um die vertikale Versatzposition jedes Elements relativ zum Ansichtsfenster zu bestimmen, können Sie die vertikale Fensterposition des Fensters ($(window).scrollTop) von der vertikalen Versatzposition jedes Elements relativ zum Dokument (.offset().top) subtrahieren.

dh.var offsetTopPosition = $(ELEMENT).offset().top - $(window).scrollTop();

Arbeitsbeispiel:

$(document).ready(function(){ 
 

 
    $(window).scroll(function(){ 
 

 
     $('div').each(function(){ 
 

 
     \t var offsetTopPosition = $(this).offset().top - $(window).scrollTop(); 
 

 
     \t if (offsetTopPosition < 100) { 
 
       $(this).addClass('active'); 
 
     \t } 
 

 
     \t if (offsetTopPosition > 100) { 
 
       $(this).removeClass('active'); 
 
     \t } 
 

 
     }); 
 

 
    }); 
 

 
});

div { 
 
width: 36px; 
 
height: 36px; 
 
line-height: 36px; 
 
margin-bottom: 200px; 
 
color: rgb(0,0,0); 
 
background-color: rgb(191,191,191); 
 
font-size: 24px; 
 
font-weight: bold; 
 
text-align: center; 
 
} 
 

 
.active { 
 
background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="active">1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div> 
 
<div>5</div>

Answer 2

können Sie Offset() verwenden, in Kombination mit $ (Fenster) .scrollTop() die Position Ihrer Elemente zu bestimmen.

$('.box').each(function(index) { 
     var threshold = 200; 
     var topOffset = $(this).offset().top; 
     if(topOffset - $(window).scrollTop() < threshold){ 
      $(this).addClass('active'); 
     }else{ 
      $(this).removeClass('active'); 
     } 
    }); 

ein funktionsfähiges Beispiel Siehe hier: https://jsfiddle.net/jkrielaars/yt584kLz/2/