固定頂端

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

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

固定底部

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

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

粘性固定頂端

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

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

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

響應式粘性固定頂端

.sticky-top通用類別也支持響應式變化。

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