4 mins read ‧ 2022/07/20 普
CSS position sticky 的使用方式
Table of Contents
css 的 position: sticky
是什麼?
position: sticky
是 2018 年後才比較被廣泛支援的 CSS 屬性,我也是遇到類似的需求才來了解
簡單講的話就是可以做到下方影片的效果
就是被指定為 position: sticky
的元素
如果距離”具有卷軸的父元素“頂部距離小於你指定的大小,就會”黏”在頂部
以往遇到這種需求,都需要寫 Javascript
來”算”出滾動位置,來調整 css
position:sticky
的使用方式
基本用法
.sticky {
position: sticky;
/* 這邊的 top 是相對它外層,⭐有設置 position: relative 的"父元素" */
top: 0;
}
position:sticky
的瀏覽器支援度
我們可以去 Can I use 去查詢一些 CSS
或 Javascript
對各瀏覽器的支援度
position: sticky
比較推薦的使用方式
基本用法如果遇到不支援的瀏覽器,可能就會產生不預期的效果
因此比較推薦的用法是下面這樣
/* 如果瀏覽器不支援 sticky ,就使用 relative */
.sticky{
position: relative;
}
/* 如果瀏覽器支援 sticky ,就設定為 sticky */
@supports (position: sticky) {
.sticky{
position: sticky;
top: 0px;
}
}
覺得不錯的話,請給我點個推薦
您的支持與鼓勵是我們前進的最大動力!