常见的效果 ---吸顶

吸顶效果是比较常见的效果之一，所以是每个初学者要掌握的内容
吸顶效果可以用多种方法实现 在此 用JQuery来实现
先在这里插入代码片
现将html代码和css代码写出

.header{
	width:100%;
	height:200px;
	background-color:red;
}
.nav{
	height:90px;
	background-color:pink;
}
.content{
	height:9999px;
	background-color:#00f;
}
.footer{
	height:90px;
	background-color:red;
}
.fixed{
	padding-top:90px;  /* 定位之后脱离文档里，防止下方元素与自身重叠 所以加padding值*/
}
.fixed .nav{
	position:fixed;
	left:0;
	width:100%;
	top:0;
}
<div class="header">header</div>
<div class="nav">nav</div>
<div class="content">content</div>
<div class="footer">footer</div>

下面写入jQuery代码

//引入jQuery
<script src ="./js/jQuery-3.3.1.js"></script>
<script>
	$(function(){
		var str=$(".nav").offset().top;//获取nav到文档顶部的距离
		$(window).scroll(function(){
			var ser=$(window).scrollTop();//获取滚动条滚动的距离
		if(ser>=str){ //判断二者之间距离大小
			$("body").addClass("fixed");//添加类fixed，使nav定位到顶部
		}else{
			$("body").removeClass("fixed");//删除类fixed
		}
})
})
</script>