例子代码
<!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>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.nav {
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
background-color: white;
box-shadow: 0 5px 20px 0 #00000022;
position: sticky;
top: 0;
}
.row {
height: 500px;
background-color: #C6D1DE;
}
.row:nth-of-type(2n) {
background-color: #EFF2F7;
}
</style>
</head>
<body>
<div class="nav"> 导航 </div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</body>
</html>导致这样的原因是，对html设置了height: 100%;去掉这个代码即可
