Ändern des Hintergrunds, wenn der Grund eines Div erreicht wird

Ich mache eine Parallax-Stil-Website und ich möchte die Hintergrundbild-Eigenschaft eines Div ändern, wenn ich den unteren Rand eines div erreichen, das 100% Breite des Fensters ist. Wie würde ich feststellen, dass die Unterseite der div mit JavaScript/jquery gescrollt wurde? Es scheint wirklich offensichtlich, aber nichts, was ich versucht habe, hatte ein positives Ergebnis.Ändern des Hintergrunds, wenn der Grund eines Div erreicht wird

Ich könnte nur scrollTop() verwenden und auf das genaue Pixel verweisen, auf dem der Boden des div landet, aber ich möchte es reagieren und in der Lage sein, zu ändern, wenn die Größe des div ändert.

Quelle

2017-05-17 Born2EditHD

Mögliches Duplikat von [Erkennung, wenn Benutzer zum Ende von div mit jQuery scrollt] (http://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with- jquery) – Hodrobond

Versuchen Sie folgendes:

`$().scrollTop()`//how much has been scrolled 
`$().innerHeight()`// inner height of the element

So können Sie die Summe der ersten beiden Eigenschaften für Ihre div zu nehmen, und wenn es um die Fenster gleich gescrollt, haben Sie das Ende erreicht:

$(window).bind('scroll', function() { 
 
    if($(window).scrollTop() >= $('#myDiv').scrollTop() + $("#myDiv").innerHeight()) { 
 
     $("#myDiv").css("background","red"); 
 
    } 
 
});

body{ 
 
height:900px; 
 
} 
 

 
div { 
 
height:200px; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
<div > 
 
Div 1 
 
</div> 
 
<div id="myDiv"> 
 
Div 2 
 
</div> 
 
<div > 
 
Div 3 
 
</div> 
 
</body> 
 
</html>

Quelle

2017-05-17 23:24:09 Omi

Danke! Das ist so viel einfacher als das, was ich versuchte :) – Born2EditHD

Als die Antwort markieren, wenn es Ihnen hilft – Omi

Ändern des Hintergrunds, wenn der Grund eines Div erreicht wird

Antwort

Verwandte Themen