吸顶效果是比较常见的效果之一,所以是每个初学者要掌握的内容
吸顶效果可以用多种方法实现 在此 用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>