当div在浏览器窗口中可见时运行脚本

我需要在浏览器窗口中显示div时运行一些JavaScript，例如，当它滚动到，甚至重复时。 我该怎么做呢？

基本结构：

CSS：

 div { float: left; height: 500px; width: 500px; margin: 50px 0; background: grey; } 

小提琴： http ： //jsfiddle.net/Q5BUe/1/

Answer 1

与其他提供的问题/解决方案一样，这里是完整的实施……

加载后，我们运行该函数以指定具有相应颜色的可见div。 在jQuery滚动处理程序上，我们继续调用该函数来分配新的背景颜色。

http://jsfiddle.net/Q5BUe/5/

 $(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"); } 

Answer 2

因为你暗示你使用jQuery就可以了

 if($('#element').is(':visible')) { //do your thing }