0

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.

Adam Cole
  • 49
  • 2
  • 7
  • Possible duplicate of [Detecting when user scrolls to bottom of div with jQuery](http://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery) – Hodrobond May 17 '17 at 20:50

1 Answers1

0

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>
Omi
  • 3,954
  • 5
  • 21
  • 41