它的表现类似position:relative和position:fixed的合体，当目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。
.sticky {
position: -webkit-sticky;
position:sticky;
top: 15px;
}
不支持的fall back：
<div class="header"></div>
.sticky {
position: fixed;
top: 0;
}
.header {
width: 100%;
background: #F6D565;
padding: 25px 0;
}
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? header.classList.add('sticky') :
header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
position:fixed
Android 2.2+ 需要添加下面的meta才正常：
<meta name="viewport" content="width=device-width, user-scalable=no">
在旧的IOS Safari 上也有问题
1、页面滚动的时候fixed元素颤抖
2、旋转屏幕的时候飘走了
3、fixed元素里有focusable的元素（例如input），会让这个fixed元素移位