CSS中 position主要有以下几种定位方式
static
静态定位，元素处于文档流中，此时 top, right, bottom, left 和 z-index 属性无效
用法: .static{position:static}
relative
相对定位，根据top，bottom，left，right属性在正常的文档流中偏移元素的位置，z-index有效
用法: .relative{position:relative}
absolute
绝对定位，脱离文档流，相对于 static 定位以外的最近的祖先元素进行定位，将其定位在指定位置相对于其最近定位的，如果没有，则相对于根元素
用法: .absolute{position:absolute}
fixed
固定定位，脱离文档流，相对于视口进行定位，滚动时，元素的位置不变
用法: .fixed{position:fixed}
sticky（css3新特性，仅适用于ios）
粘性定位，元素处于文档流中，采用相对定位，但会在滚动到某个位置时变为fixed定位，且相对于其最近的块级祖先元素进行定位
用法: .static{position:static;top:10px;position: -webkit-sticky;}
ios:在viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下
需要注意的是sticky 生效应至少设置 top, right, bottom, left中的一个
如果同时指定 top 和 bottom（非 auto），优先采用 top
如果同时指定 left 和 right，若 direction 为 ltr（英语、汉语等），则优先采用 left；若 direction 为 rtl（阿拉伯语、希伯来语等），则优先采用 right
android:采用监听的方法
var nav = document.querySelector('.nav');
var navOffsetY = nav.offsetTop;
function onScroll(e) {
window.scrollY >= navOffsetY ? nav.classList.add('fixed') : nav.classList.remove('fixed');
}
window.addEventListener('scroll', onScroll);
