Question

我正在创建一个视差风格的网站，我希望当我到达窗口宽度为100％的div的底部时，div的background-image属性会发生变化。我如何检测到div的底部已经滚动到javascript / jquery？这似乎很明显，但我尝试过的任何事都没有取得积极成果。

我可以使用scrollTop（）并引用div底部所在的确切像素，但我希望它能够响应，并且如果div的大小发生变化则能够改变。

Answer 1

试试这个：

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

因此，您可以获取div的前两个属性的总和，当它等于滚动的窗口时，您已达到结束：

$(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底部时更改背景

1 个答案: