顶部悬浮-DOM

Youser511

于 2022-07-15 22:00:56 发布

阅读量182

点赞数

分类专栏：学习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_45025670/article/details/125812916

版权

学习专栏收录该内容

92 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
	body{
		height:2500px; 
		padding:0; 
		margin:0;
	}
	#div1{
		height:30px; 
		width:100%; 
		background:#0AF;
	}
	#div2{
		height:30px; 
		width:100%; 
		background:red; 
		top:400px; 
		position:absolute;
		}
</style>
</head>

<body>
	<div id="div1">
		顶部信息栏
	</div>
	<div id="div2">
		留言信息
	</div>
<script>
	window.onscroll = function(){
		var div2 = document.getElementById("div2");
		var _top = document.documentElement.scrollTop || document.body.scrollTop;
		if(_top > 400){
			div2.style.position = "fixed";
			div2.style.top = 0;
		} else {
			div2.style.position = "absolute";
			div2.style.top = "400px";
		}
	}
</script>
</body>
</html>