一、使用css直接用固定定位position: fixed。
适合使用在导航栏有固定高度,避免导航栏下面的内容被遮盖。下面的盒子就需要调整top的距离。
示例代码:
<style>
*{
margin: 0;
padding: 0;
}
p{
height: 500px;
}
section{
padding-top: 40px;
}
div{
height: 40px;
width: 100%;
color: white;
background-color: crimson;
position: fixed;
top: 0;
}
</style>
<section>
<div id="Head">head</div>
<p style="background-color: aquamarine;">11111111111111111111</p>
<p style="background-color: salmon;">2222222222222222</p>
<p style="background-color: royalblue;">333333333333</p>
<p style="background-color: aqua;">444444444444444</p>
<p style="background-color: burlywood;">555555555555555</p>
<p style="background-color: green;">666666666666666</p>
<p style="background-color: teal;">777777777777777</p>
<p style="background-color: chartreuse;">88888888888888</p>
</section>
效果:
二、结合js动态添加css属性position: fixed;定位。
适合不确定导航栏高度,不能调整导航栏下面盒子的top高度。
示例代码:
<style>
div{
font-size: 50px;
width: 100%;
color: white;
background-color: crimson;
}
</style>
<script>
let Head = document.getElementById('Head')
window.onscroll = ()=>{
// 获取滚动距离
let top = document.documentElement.scrollTop || document.body.scrollTop;
if (top != 0) {
Head.style = "position: fixed;top: 0;"
}else{
Head.style = "position: static;"
}
}
</script>
效果:
三、使用position: sticky;
这个超简单,不用js,不用确定导航栏高度纯css,除了有些浏览器需要兼容。是css3新添加的属性。
示例代码:
div{
font-size: 40px;
width: 100%;
color: white;
background-color: crimson;
position: sticky;/* 新属性sticky */
top: 0;/* 距离页面顶部距离 */
}
效果: