position: sticky
position: sticky粘性定位：是css新增的一个position属性。说是对于IOS的兼容性好一点，对于安卓的兼容性不太好
于position:fixed的区别：我们都知道常用的几个定位（static、absolute、relative、fixed），如果没有额外的js处理，只要写上，页面立马就可以看到相对应的效果。而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时，定位效果就会消失。
适用场合：一开始不显示，滚动到一定位置需要显示的元素
使用注意事项：
- 父元素不能有overflow属性
- left、top、right、bottom必须要有一个
-
仅在父元素内生效，父元素的高度必须大于sticky元素的高度
ios加前缀-webkit-sticky（考虑到兼容问题）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.header {
height: 100px;
background: #FAEBD7;
}
.parent {
/* width: 200px; */
height: 200px;
background-color: #FF0000;
/* margin-top: 40px; */
/* overflow: auto; */
}
.child{
position: sticky;
top: 0px;
/* width: 200px; */
height: 50px;
background-color: blue;
/* margin-top: 60px; */
}
.child2 {
height: 800px;
background-color: #FFD700;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="parent">
<div class="child">
</div>
<div class="child2">
222
</div>
</div>
</body>
</html>
版权声明：本文为qq_30418537原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。