功能：頁(yè)面滾動(dòng)到一定距離，導(dǎo)航置頂懸浮
之前遇到這個(gè)問(wèn)題班套，我的做法是監(jiān)聽(tīng)頁(yè)面滾動(dòng)，當(dāng)頁(yè)面滾動(dòng)到導(dǎo)航時(shí)故河，給導(dǎo)航添加css position:fixed吱韭，此時(shí)導(dǎo)航就會(huì)置頂懸浮，頁(yè)回滾到導(dǎo)航時(shí)鱼的，取消置頂
最簡(jiǎn)單的方法是：
給導(dǎo)航添加css position:sticky理盆，這個(gè)css可以自動(dòng)實(shí)現(xiàn)這種功能，不需要再監(jiān)聽(tīng)滾動(dòng)
sticky 定位
sticky 英文字面意思是粘凑阶，粘貼猿规，所以可以把它稱(chēng)之為粘性定位。
position: sticky; 基于用戶(hù)的滾動(dòng)位置來(lái)定位宙橱。
粘性定位的元素是依賴(lài)于用戶(hù)的滾動(dòng)姨俩，在 position:relative 與 position:fixed 定位之間切換。
它的行為就像 position:relative; 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)师郑，它的表現(xiàn)就像 position:fixed;环葵，它會(huì)固定在目標(biāo)位置。
元素定位表現(xiàn)為在跨越特定閾值前為相對(duì)定位宝冕，之后為固定定位张遭。
這個(gè)特定閾值指的是 top, right, bottom 或 left 之一，換言之地梨，指定 top, right, bottom 或 left 四個(gè)閾值其中之一菊卷，才可使粘性定位生效缔恳。否則其行為與相對(duì)定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位的烁。 Safari 需要使用 -webkit- prefix (查看以下實(shí)例)褐耳。
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
