css3新属性 position: sticky，实现粘性定位
在项目开发中，我们经常遇到这样的需求：
由于浏览器的屏幕区域有限，而承载的内容越来越多。经常会需求当滚动区域过了后，希望把重要信息（表头、菜单、栏目等）固定浮动，方便阅读信息。
以往的做法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position sticky</title>
</head>
<style>
.header {
width: 100%;
background: #f6d565;
padding: 25px 0;
}
.sticky {
position: fixed;
top: 0;
}
</style>
<body>
<div style="height: 200px;">上面内容</div>
<div class="header">浮动内容</div>
<div style="height: 1200px;">下面内容</div>
</body>
<script>
var header = document.querySelector('.header');
var originOffsetY = header.offsetTop;//获取该元素初始的距父元素顶部的高度
function onScroll(e) {
window.scrollY >= originOffsetY///屏幕顶部到页面顶部的距离大于获取的原始值
? header.classList.add('sticky')
: header.classList.remove('sticky')
}
document.addEventListener('scroll', onScroll)
</script>
</html>必须js监听原生事件才能完成效果。
css3新属性 position: sticky，它的表现类似position:relative和position:fixed 的合体，当目标区域在屏幕中可见时，它的行为就像position:relative；当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。（注意：top和left优先级分别大于bottom和right）
position: sticky 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position sticky</title>
</head>
<style>
.header {
width: 100%;
background: #f6d565;
padding: 25px 0;
position: sticky;
top: 0;
}
</style>
<body>
<div style="height: 300px;">上面内容</div>
<div class="header">浮动内容</div>
<div style="height: 1200px;">下面内容</div>
</body>
</html>- 语法
position: sticky;
top: 0;- 特点
- 浏览器的可视窗口为参照点移动元素
- 粘性定位占有原来的位置
- 注意（生效条件）
- 必须添加 top, left, right, bottom 其中一个才有效
- 父元素 overflow: auto|scroll|hidden，必须 overflow: visible
- 父元素高度必须大于 sticky元素高度
