开发过程中有用到吸顶的操作:到一定距离后,到浏览器顶部的距离不动,,sticky的应用 简单又易理解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" />
<style type="text/css">
.box1 {
height: 200px;
background-color: aqua;
}
.box2 {
/* 本身的高度 */
height: 70px;
background-color: red;
transition: 0.9 ease;
/* 吸顶属性 */
position: sticky;
z-index: 9;
/* 吸顶时候的距离 */
top: 80px;
}
.box3 {
height: 1920px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<div class="box1">顶部距离</div>
<div class=" box2">吸顶部分</div>
<div class="box3">剩余部分</div>
</div>
</body>
</html>
sticky的属性相关介绍: