粘性定位

刀刀

1/3/2025

0 字

0 分钟

粘性定位是 CSS 一个好用的属性方法，当为元素设置粘性定位后，该元素即将被滑动出屏幕外时会固定在边缘，使用方法如下：

dd {
  position: sticky;
  top: 0;
}

那么，粘性定位的深层次逻辑是什么呢？ top: 0 可以不设置么？为什么设置之后就能固定到屏幕顶部了呢？

想要了解粘性定位的底层概念，需要先了解两个概念：

• 包含块
• 最近可滚动元素

包含块是 CSS 最重要的知识之一，它的概念很大，这里不做过多赘述，后面考虑开新坑。最近可滚动元素是以自身为起点，一直查找可滚动的父元素。

何为可滚动元素，设置了 overflow: srcoll 等方法都是可滚动元素。因此一直查看父标签是否是可滚动元素，如果都不是，那么最后会找到整个视口。

设置了粘性定位 top: 0 的元素在没接触到最近可滚动的元素（也就是视口）时是正常滚动的；但是当它接触到视口的顶部时，就会吸附到视口的顶部。

即使吸附了，其他元素当它还在原来的位置，因此不会影响其他元素的正常排列。

最后如果该元素触碰到父元素（即包含块）的边缘，继续滚动就不会再吸附，而是被带离视口区域。

往回滑动则会重新保持吸附的状态。

最后如果回滑到它原本的位置，则会恢复成原来的样子，跟随视口滑动而滑动。

最后总结一下，粘性定位的元素实际上参考了很多元素，和做了很多处理，主要参考最近可滑动的元素、包含块以及自身。