Search code examples
javascriptjqueryhtmlbackground-imageparallax

Changing background when the bottom of a div is reached

I am making a parallax style website and i want the background-image property of a div to change when i reach the bottom of a div that is 100% width of the window. How would i detect that the bottom of the div has been scrolled to with javascript/jquery? It seems really obvious but nothing i have tried has had a positive result.

I could just use scrollTop() and reference the exact pixel that the bottom of the div lands on but i want it to be responsive and be able to change if the size of the div changes.

Solution

  • Try this:

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

    So you can take the sum of the first two properties for your div, and when it equals to the windows scrolled, you've reached the end: 

    $(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>