到达 div 底部时更改背景

Question

我正在制作一个视差风格的网站，我希望 div 的背景图像属性在到达宽度为 100% 的 div 底部时发生变化的 window。我如何检测 div 的底部已被 javascript/jquery 滚动到？这看起来很明显，但我尝试过的任何事情都没有产生积极的结果。

我可以只使用 scrollTop() 并引用 div 底部所在的确切像素，但我希望它能够响应并且能够在 [=16= 的大小时更改] 变化。

Answer 1

试试这个：

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

因此，您可以对 div 的前两个属性求和，当它等于滚动的 windows 时，您就到达了终点：

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

到达 div 底部时更改背景

Changing background when the bottom of a div is reached

html

javascript

jquery

background-image

parallax