第一种:使用fixed定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 100px;
background-color: hotpink;
}
nav{
width: 100%;
height: 80px;
background-color: #ccc;
}
main{
width: 100%;
height: 2000px;
background-color: yellow;
}
.fd{
position: fixed;
top: 0;
}
</style>
</head>
<body>
<header>网页头部区域</header>
<nav>网页导航区域</nav>
<main>主要内容区域</main>
<script>
var nav = document.getElementsByTagName('nav')[0]
onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if(scrollTop>=100){
// 吸顶,给元素设置固定定位
// className 通过这个属性添加一个类名
nav.className = 'fd'
}else{
// 取消吸顶
nav.className = ''
}
}
</script>
</body>
</html>
第二种:使用sticky定位
关于sticky定位是什么可以参考这篇文章:sticky定位详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 100px;
background-color: hotpink;
}
nav{
width: 100%;
height: 80px;
background-color: #ccc;
}
main{
width: 100%;
height: 2000px;
background-color: yellow;
}
.fd{
position: sticky;
top: 0;
right: 0;
bottom: calc(100% - 180px);
left: 0;
}
</style>
</head>
<body>
<header>网页头部区域</header>
<nav>网页导航区域</nav>
<main>主要内容区域</main>
<script>
var nav = document.getElementsByTagName('nav')[0]
onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if(scrollTop>=100){
// 吸顶,给元素设置固定定位
// className 通过这个属性添加一个类名
nav.className = 'fd'
}else{
// 取消吸顶
nav.className = ''
}
}
</script>
</body>
</html>