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

group header 滚屏吸附

2015-09-16 22:04 645 查看 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function init() {
var headers = document.getElementsByClassName("header");
var me = headers[0];

window.addEventListener("scroll", function(e){
for(var i=0 ; i<headers.length; i++){
if(window.scrollTop == 0) {//滚动上方出屏幕的高度为0，则认为是最上端
me.style.position = "relative";
me.style.top = "";
} else {//开始做吸附处理
if(headers[i].getBoundingClientRect().top <= 0) {//发现滚动高度超出屏幕
if(me != null) {//解冻当前吸附元素
me.style.position = "relative";
me.style.top = "";
}
headers[i].style.position = "fixed";//锁定最新一个超出的元素
headers[i].style.top = "0";
me = headers[i];//置换标志位
}
}
}
},false);
}
window.onload = init();
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
border: 0;
}
.header{
background: lightslategray;
width: 100%;
height: 20px;
line-height: 20px;
}
</style>
</head>
<body>
<div style="background: lightseagreen;width: 100%;">
<div class="header">A</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="header1" class="header">B</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div  class="header">C</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="header">D</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="header">E</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="header">F</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="header">G</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="header">H</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="header">I</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="header">J</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="header">K</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="header">L</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="header">M</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="header">N</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="header">O</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="header">P</div>
</div>
</html>


header滚动到顶端时，吸附。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript html
相关文章推荐
新的分享
章节导航