您的位置：首页 > Web前端 > JavaScript

js滚动刷屏小实例

2016-11-23 15:12 405 查看

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
line-height: 40px;
border: 1px solid red;
}
</style>
<body>
<div>第1屏</div>
<div>第2屏</div>
<div>第3屏</div>
<div>第4屏</div>
<div>第5屏</div>
<div>第6屏</div>
<div>第7屏</div>
<div>第8屏</div>
<div>第9屏</div>
<div>第10屏</div>
<div>第11屏</div>
<div>第12屏</div>
<div>第13屏</div>
<div>第14屏</div>
<div>第15屏</div>
<div>第16屏</div>
<div>第17屏</div>
<div>第18屏</div>
<div>第19屏</div>
<div>第20屏</div>
<div>第21屏</div>
<div>第22屏</div>
<div>第23屏</div>
<div>第24屏</div>
<div>第25屏</div>
<div>第26屏</div>
<div>第27屏</div>
<div>第28屏</div>
<div>第29屏</div>
<div>第30屏</div>
</body>
<script type="text/javascript">
//1.获取元素

var div = document.getElementsByTagName('div');

//2.自定义方法获取元素到页面的距离
function offset(element) {

//3.1获取当前元素的offsetTop

var pos = {left:0,top:0};

//3.2获取元素有定位的父级的位置
var parents = element.offsetParent;

//3.3先加上自己的left top

pos.left += element.offsetLeft;

pos.top += element.offsetTop;

while(parents && !/html|body/i.test(parents.tagName)) {

pos.top += parents.offsetTop;

pos.left += parents.offsetLeft;

parents = parents.offsetParent;

}

return pos

}

//3.添加滚动事件

window.onscroll = function(){

//4.获取滚动条位置

var sTop = document.documentElement.scrollTop || document.body.scrollTop;

console.log(sTop);

//5.遍历div

for(var i = 0; i<div.length;i++){

//6.获取当前元素的位置

var top1 = offset(div[i]).top;

//7. 如果滚动条位置大于等于当前元素位置说明到了这个位置

if(sTop>=top1){

//8.变颜色

div[i].style.background='pink';

}else{

div[i].style.background = '';

}

}

}
</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航