position: sticky（粘性定位）
粘性定位 sticky 相当于相对定位 relative 和固定定位 fixed 的结合；在页面元素滚动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时；元素的相对定位 relative 效果变成固定定位 fixed 的效果。
使用条件
父元素不能 overflow:hidden 或者 overflow:auto 属性
必须指定 top、bottom、left、right 4 个值之一，否则只会处于相对定位
父元素的高度不能低于 sticky 元素的高度
sticky 元素仅在其父元素内生效
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*{margin: 0;padding: 0}
body{height: 1500px}
.box{width: 100%;height: 200px;background: greenyellow}
.sticky{width: 100%;height: 100px;background: red;position: sticky;top: 0}
</style>
</head>
<body>
<div class="box">
</div>
<div class="sticky">
</div>
<img src="http://p2.so.qhmsg.com/sdr/400__/t01d9abf881f07bbb77.jpg"/>
</body>
<script>
</script>
</html>
相比fiexd sticky最明显的区别就是没有脱离文档流 方便的一匹哦！兼容性也是可以滴，IOS亦能随心所欲
网友评论