| 类名 | 描述 |
|---|---|
| .fixed-top | 将元素固定到视口顶部。 |
| .fixed-bottom | 将元素固定到视口底部。 |
| .sticky{-$infix}-top | 响应式地将元素固定到视口顶部。 |
| .sticky{-$infix}-bottom | 响应式地将元素固定到视口底部。 |
固定顶部
将元素定位在视口顶部，从一边到另一边。确保你理解在项目中使用固定定位的影响；你可能需要添加额外的 CSS。
<div class="fixed-top">...</div>
固定底部
将元素定位在视口底部，从边到边。确保你了解固定定位在你的项目中的影响；你可能需要添加额外的 CSS。
<div class="fixed-bottom">...</div>
固定顶部
将元素定位在视口顶部，从边缘到边缘，但仅在你滚动过它之后。
<div class="sticky-top">...</div>
响应式粘性顶部
针对.sticky-top效用也存在响应式变体。
<div class="sm:sticky-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="md:sticky-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="lg:sticky-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="xl:sticky-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
<div class="2xl:sticky-top">Stick to the top on viewports sized 2XL (extra-extra-large) or wider</div>
固定底部
将元素定位在视口底部，从边到边，但只有在滚动超过它之后才会这样。
<div class="sticky-bottom">...</div>
响应式粘性底部
针对.sticky-bottom效用也存在响应式变体。
<div class="sm:sticky-bottom">Stick to the bottom on viewports sized SM (small) or wider</div>
<div class="md:sticky-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
<div class="lg:sticky-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
<div class="xl:sticky-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
<div class="2xl:sticky-bottom">Stick to the bottom on viewports sized 2XL (extra-extra-large) or wider</div>