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);