group header 滚屏吸附

最新推荐文章于 2019-07-23 23:38:00 发布

牛尊堡

最新推荐文章于 2019-07-23 23:38:00 发布

阅读量310

点赞数

分类专栏： js相关文章标签： javascript html

本文链接：https://blog.csdn.net/rockstonexx/article/details/48502949

版权

js相关专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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滚动到顶端时，吸附。

牛尊堡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
group header 滚屏吸附

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(
复制链接

扫一扫

专栏目录