您的位置:首页 - 教程 - jQuery - 正文
jQuery指定DIV滚动到出现时执行代码
效果:http://hovertree.com/texiao/jquery/28/

效果2:http://hovertree.com/texiao/jquery/28/1.htm

可以使用鼠标也可以使用键盘方向键.

参考:http://hovertree.com/h/bjaf/jqguding.htm

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery指定DIV滚动到出现时执行代码 - 何问起</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base target="_blank" />
<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<style>
body {
margin: 0px;
font-family: Arial;
}

a {
color: blue;
}
</style>
</head>
<body>
<div style="text-align:center;width:100%;margin:0px auto;">
<h1>何问起</h1>
指定DIV滚动到出现时,执行代码. <br />本页为把红色颜色改为蓝色.<br />请滚动页面...<br />
<a href="http://hovertree.com/texiao/yestop/">Yestop</a> <a href="http://hovertree.com/h/bjaf/hoverclock.htm">HoverClock</a> <a href="http://hovertree.com">首页</a>
<a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/h/bjaf/vc8993j8.htm">原文</a>
</div>
<div style="height: 360px;background-color: #66FF66;text-align:center;">

</div><div id="bg1" style="width:100%;text-align:center;height:200px;background-color:red">


</div>
<div style="width:100%;text-align:center;height:300px;background-color:silver">

</div>
<div style="width:100%;text-align:center;height:200px;background-color:skyblue" id="divhovertree">
何问起 &copy; hovertree.com<br />
本DIV出现时执行代码,把红色div改为蓝色。
---------------------------内容-----------------
</div>
<div style="height: 200px; visibility: visible; background-color: Olive">
</div><div style="height:200px;background-color:burlywood"></div><div style="height:200px;background-color:darkorchid"></div>
<div style="height: 200px; visibility: visible; background-color:gray">
</div>
<div style="height:200px;background-color:blue"></div>
<div style="height:200px;background-color:deeppink"></div>
<div style="height:200px;background-color:yellow"></div>
<div style="height:200px;background-color:yellowgreen"></div>
<div style="height:800px;background-color:white"></div>
<script type="text/javascript">
/*
*滚动条滑动,位置不变的DIV层
*div_id:DIV的ID属性值,必填参数
*offsetTop:滚动条滑动时DIV层距顶部的高度,可选参数
*/
function HoverTreeScroll(div_id) {
var Obj = $('#' + div_id);
//判断元素是否存在 何问起
if (Obj.length != 1) { return false; }

var offsetTop = arguments[1] ? arguments[1] : 0;
var ObjTop = Obj.offset().top - $(window).height();
var h_one = true;

$(window).scroll(function () {
if ($(window).scrollTop() > ObjTop) {
if (h_one) {
//在这里些滚动指定DIV时执行的代码
$("#bg1").css("background-color","blue")
h_one = false;
}

}
});
}
//已经滚动到这个ID为divhovertree的DIV.
HoverTreeScroll('divhovertree');
</script>
</body>
</html>

评论: