我需要运行一些 JavaScriptdiv
例如,当滚动甚至重复滚动时,在浏览器窗口中可见。我该怎么做呢?
基本结构:
<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 滚动处理程序上,我们继续调用该函数来分配新的背景颜色。
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");
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)