js scroll funktioniert nicht, wenn auf der Unterseite gescrollt

Question

Ich stieß gerade auf dieses Problem mit dem Hinzufügen einer Klasse auf Bildlauf. Dies war das Original-Skript.

Dies funktionierte nicht, wenn die Seite vollständig durchgescrollt wurde und ich die Seite aktualisiert habe. Ich löste es, indem ich "else" entfernte und zusätzlich "IF" hinzufügte. Dies ist das Arbeitsskript.

$(window).scroll(function(){ 
if ($(this).scrollTop() > 100) { 
    $('.navbar').addClass('navbar-inverse'); 
} if ($(this).scrollTop() < 100) { 
    $('.navbar').removeClass('navbar-inverse'); 
}}); 

Jetzt verstehe ich nicht ganz die Logik dahinter. Warum funktioniert das erste Skript nicht richtig?

Answer 1

Ich habe das nur für Sie geschrieben. Sie können Offset und dann oben für die Position verwenden. Hoffe das hilft :).

$(document).ready(function(){ 
 

 
$(window).scroll(function(){ 
 
\t var paragraphPosition = $("#id1").offset(); 
 

 
\t var windowPostion = $(window).scrollTop(); 
 

 
\t if(paragraphPosition.top < windowPostion + 250){ 
 
\t \t $("#id1").addClass("navbar-inverse"); 
 
\t } 
 
\t else if(paragraphPosition.top > windowPostion){ 
 
\t \t $("#id1").removeClass("navbar-inverse"); 
 
\t } 
 
}); 
 

 
});

.box{ 
 
\t height: 200px; 
 
\t width: 300px; 
 
\t border: 2px solid #000000; 
 
} 
 
.navbar-inverse{ 
 
\t background: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class = "box"> 
 
\t Do greatest at in learning steepest. Breakfast extremity suffering one who all otherwise suspected. He at no nothing forbade up moments. Wholly uneasy at missed be of pretty whence. John way sir high than law who week. Surrounded prosperous introduced it if is up dispatched. Improved so strictly produced answered elegance is. 
 
</div> 
 
<div class = "box"> 
 
\t Do greatest at in learning steepest. Breakfast extremity suffering one who all otherwise suspected. He at no nothing forbade up moments. Wholly uneasy at missed be of pretty whence. John way sir high than law who week. Surrounded prosperous introduced it if is up dispatched. Improved so strictly produced answered elegance is. 
 
</div> 
 
<div id = "id1">This is a paragraph</div> 
 
<div class = "box"> 
 
\t Do greatest at in learning steepest. Breakfast extremity suffering one who all otherwise suspected. He at no nothing forbade up moments. Wholly uneasy at missed be of pretty whence. John way sir high than law who week. Surrounded prosperous introduced it if is up dispatched. Improved so strictly produced answered elegance is. 
 
</div> 
 
<div class = "box"> 
 
\t Do greatest at in learning steepest. Breakfast extremity suffering one who all otherwise suspected. He at no nothing forbade up moments. Wholly uneasy at missed be of pretty whence. John way sir high than law who week. Surrounded prosperous introduced it if is up dispatched. Improved so strictly produced answered elegance is. 
 
</div>