网页布局与滚动监听技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/cyang233/article/details/103865424

<style>
	*{margin: 0;padding: 0;}
	.header{
		height: 120px;
		background-color: lightgrey;
		}
	.all{
	padding-bottom:66px;
	}
	.all .nav{
		position:fixed;
		top:0;
		left:0;
	}
	.nav{ 
		width:100%;
		height: 60px;
		background-color: dodgerblue;
		}
	.content{
		height: 1800px;
		background-color: darkorange;
	}
	.footer{
		height: 140px;
		background-color: #484848;
		color:#fff;
	}
	#toTop{
		position: fixed;
		right:50px;
		bottom:100px;
		line-height: 60px;
		width: 60px;
		text-align: center;
		background-color: #fff;
		display: none;
	}
</style>
<body>
	<div class="header">header</div>
	<div class="nav">nav</div>
	<div class="content">内容</div>
	<div class="footer">页脚</div>
	<div id="toTop" onclick="goTop1()">top</div>
	<script>
		window.onscroll = function(){
		var h = document.documentElement.scrollTop;
		//获取浏览器的的滚动高度
		var nav = document.querySelector(".nav");
		var navh = nav.offsetTop;
		//获取nav距离顶部的距离
		if(h>nav){
			document.body.classList.add("all");
			//给body添加 all 类
		}else{
		document.body.classList.remove("all");
		//给body移除 all 类
		}
	}
	</script>
</body>

js 吸顶效果