<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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
