当 div
在浏览器窗口中可见时,我需要运行一些 JavaScript,例如,当它滚动到甚至重复时。我将如何去做呢?
基本结构:
<div class='page1'></div>
<div class='page2'></div>
<div class='page3'></div>
<div class='page4'></div>
CSS:
div {
float: left;
height: 500px;
width: 500px;
margin: 50px 0;
background: grey;
}
fiddle :http://jsfiddle.net/Q5BUe/1/
最佳答案
与其他提供的问题/解决方案一样,这里是完整的实现...
加载后,我们运行函数为可见的 div 分配相应的颜色。在 jQuery 滚动处理程序上,我们继续调用函数来分配新的背景颜色。
$(allInView);
$(window).scroll(allInView);
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
function allInView() {
if (isScrolledIntoView($(".page1"))) $(".page1").css("backgroundColor", "red");
else $(".page1").css("backgroundColor", "grey");
if (isScrolledIntoView($(".page2"))) $(".page2").css("backgroundColor", "green");
else $(".page2").css("backgroundColor", "#333");
if (isScrolledIntoView($(".page3"))) $(".page3").css("backgroundColor", "yellow");
else $(".page3").css("backgroundColor", "#222");
if (isScrolledIntoView($(".page4"))) $(".page4").css("backgroundColor", "blue");
else $(".page4").css("backgroundColor", "#111");
}
关于javascript - 当 div 在浏览器窗口中可见时运行脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12322833/