CSS中 position主要有以下幾種定位方式

static

靜態(tài)定位，元素處于文檔流中，此時(shí) top, right, bottom, left 和 z-index 屬性無(wú)效

用法: ?.static{position:static}

relative

相對(duì)定位，根據(jù)top，bottom，left，right屬性在正常的文檔流中偏移元素的位置，z-index有效

用法: ?.relative{position:relative}

absolute

絕對(duì)定位，脫離文檔流，相對(duì)于 static 定位以外的最近的祖先元素進(jìn)行定位，將其定位在指定位置相對(duì)于其最近定位的，如果沒(méi)有，則相對(duì)于根元素

用法: ?.absolute{position:absolute}

fixed

固定定位，脫離文檔流，相對(duì)于視口進(jìn)行定位，滾動(dòng)時(shí)，元素的位置不變

用法: ?.fixed{position:fixed}

sticky（css3新特性，僅適用于ios）

粘性定位，元素處于文檔流中，采用相對(duì)定位，但會(huì)在滾動(dòng)到某個(gè)位置時(shí)變?yōu)閒ixed定位，且相對(duì)于其最近的塊級(jí)祖先元素進(jìn)行定位

用法: ?.static{position:static;top:10px;position: -webkit-sticky;}

ios:在viewport 視口滾動(dòng)到元素 top 距離小于 10px 之前，元素為相對(duì)定位。之后，元素將固定在與頂部距離 10px 的位置，直到 viewport 視口回滾到閾值以下

需要注意的是sticky 生效應(yīng)至少設(shè)置 top, right, bottom, left中的一個(gè)

如果同時(shí)指定 top 和 bottom（非 auto），優(yōu)先采用 top

如果同時(shí)指定 left 和 right，若 direction 為 ltr（英語(yǔ)、漢語(yǔ)等），則優(yōu)先采用 left；若 direction 為 rtl（阿拉伯語(yǔ)、希伯來(lái)語(yǔ)等），則優(yōu)先采用 right

android:采用監(jiān)聽(tīng)的方法

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