固定頂端

將元素固定在屏幕的頂端，邊緣相接。確保您了解項(xiàng)目中使用fixed定位的結(jié)果，可能會(huì)需要添加其他CSS。

<div class="fixed-top">...</div>

固定底部

將元素固定在屏幕的底部，邊緣相接。確保您了解項(xiàng)目中使用fixed定位的結(jié)果，可能會(huì)需要添加其他CSS。

<div class="fixed-bottom">...</div>

粘性固定頂端

將元素固定在屏幕的頂部，邊緣相接。但只有在滾動(dòng)離開(kāi)該元素之后才會(huì)執(zhí)行。.sticky-top通用類別使用CSS的position: sticky，并非所有瀏覽器都完全支持。

譯者注：
position: sticky粘性定位：是css新增的一個(gè)position屬性。說(shuō)是對(duì)于IOS的兼容性好一點(diǎn)，對(duì)于安卓的兼容性不太好（我自己感覺(jué)安卓的兼容性也不錯(cuò)）
與position:fixed的區(qū)別：我們都知道常用的幾個(gè)定位（static、absolute、relative、fixed），如果沒(méi)有額外的js處理，只要寫(xiě)上，頁(yè)面立馬就可以看到相對(duì)應(yīng)的效果。而sticky相當(dāng)于加了一個(gè)滾動(dòng)事件的處理，當(dāng)頁(yè)面滾動(dòng)到相對(duì)應(yīng)的元素上，就會(huì)變成固定定位的效果。當(dāng)滾動(dòng)到父元素不在可視區(qū)域范圍內(nèi)時(shí)，定位效果就會(huì)消失。
適用場(chǎng)合：一開(kāi)始不顯示，滾動(dòng)到一定位置需要顯示的元素。
使用注意事項(xiàng)：
父元素不能有overflow屬性
left、top、right、bottom必須要有一個(gè)
僅在父元素內(nèi)生效，父元素的高度必須大于sticky元素的高度
ios加前綴-webkit-sticky（考慮到兼容問(wèn)題）

<div class="sticky-top">...</div>

響應(yīng)式粘性固定頂端

.sticky-top通用類別也支持響應(yīng)式變化。

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>