Pinning (捲動釘選)

文字固定不動，各行隨捲動進度淡入淡出。

在[套用位置]加入「固定文字淡入淡出」(Sticky Text Fade) 效果，也叫 sticky scroll text opacity fade。
該區塊捲動期間，文字區塊固定在原位，各行隨捲動進度逐行淡入淡出。
讓淡入淡出直接跟隨捲動位置，往回捲動時隨之反轉；無論透明度如何，每一行都要能被螢幕閱讀器讀到。

捲動時卡片固定在頂端並層層疊起，先前的卡片通常會稍微縮小。

在[套用位置]加入「堆疊卡片」(Stacking Cards)，也叫 sticky stacking cards 或 card stack scroll。
捲動時，每張卡片固定在頂端附近，下一張卡片從下方滑上來蓋住它，底下的卡片稍微縮小，疊成整齊的一疊。
讓每張先前的卡片露出一道細邊，並給最後一張卡片留足空間，讓它在區塊結束前滑到定位。

縱向捲動時，一排被固定的面板橫向移動。

在[套用位置]加入「橫向捲動區塊」(Horizontal Scroll Section)，也叫 horizontal scrolling 或 scroll-jacked horizontal gallery。
區塊到達頂端時要固定住，向下捲動時讓其中的一排面板橫向移動，最後一個面板出現後再解除固定。
橫向移動要直接跟著捲動位置，往回捲動時反向移動；在小螢幕上，或如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就改成可以正常滑動的橫排。

使用者往下捲動後，固定頁首的高度或尺寸會縮小。

在[套用位置]加入「固定頁首縮小」(Sticky Header Shrink)，也叫 shrinking header 或 shrink on scroll。
頁首固定在頂端，讀者稍微往下捲動後，平順地縮成更窄的橫條、Logo 也變小；回到頂端時再恢復原狀。
頁首尺寸變化時，不要讓下方內容跳動。

隨著使用者捲動頁面或文章，進度條或圓環逐漸填滿。

在[套用位置]加入「捲動進度指示器」(Scroll Progress Indicator)，也叫閱讀進度條 (reading progress bar)。
頂端的一條細條要隨著讀者捲動的距離從左往右填滿，到結尾時佔滿整個寬度。
直接綁定捲動位置，不要有緩動延遲，也不要遮住內容。

捲動停止時會吸附到預設的位置，例如投影片或區塊。

在[套用位置]加入「捲動吸附」(Scroll Snap)，也叫 scroll snapping 或 snap scrolling。
捲動停下時，畫面要俐落地吸附到最近的區塊，讓每個區塊都對齊邊緣，而不是停在一半。
使用瀏覽器原生的吸附功能，讓滑鼠滾輪、觸控和鍵盤捲動都照常運作，並確保比畫面更高的內容也能完整閱讀。

動畫進度直接綁定捲動位置，往下捲動時播放，往回捲動時倒轉。

在[套用位置]加入「捲動連動動畫」(Scroll-Linked Animation)，也叫 scroll-driven animation 或 scroll scrub。
動畫要緊跟著捲動位置：往下捲動時正向播放，往上捲動時當場倒轉，本身不帶以時間為基礎的緩動。
把整段動畫對應到一個明確的捲動範圍；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就顯示一個合理的靜態狀態。