CSS粘性定位是怎样工作的每日前端夜话0x1F

每日前端夜话0x20

每日前端夜话，陪你聊前端。

每天晚上18:00准时推送。

正文共：1573 字

预计阅读时间： 7 分钟

翻译：疯狂的技术宅

原文：https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46

浏览器对 CSS粘性定位有着非常好的支持，但很多开发者都没有用过它。

究其原因有两个：

第一，受到浏览器的良好支持需要漫长的等待：浏览器的支持往往需要很长的时间才能完成，到时候它的功能已经被人们遗忘了。

第二个原因是很多开发者并不能完全理解其工作原理背后的逻辑，这就是我的切入点。

我假设你们都知道什么事CSS定位，不过还是先简单回顾一下比较好：

在3年前，有四种 CSS 定位： 、 、 和。

、 、 和 之间主要的区别在于它们在DOM流中占用的空间。 和 会保留它们在文档流中的自然空间，而 和 则不会 —— 它们的空间被移除而且具有浮动行为。

正如我下面将要解释的那样，新的粘性定位与所有类型都有相似之处。

我的第一个粘性定位

可能很多人都玩过粘性定位。我已经接触过一段时间了，直到我意识到自己并不是完全理解它。

在第一个例子中，大家很容易就能看明白 当视口到达定义的位置时，元素会被粘住。

例：

但问题是，它有时候能用，而有时却不起作用。 当它工作时，元素会粘住，但在滚动到其他部分，它会停止粘贴。 作为一个靠 CSS 混饭吃的人，我完全不能接受自己对这个问题是不理解的，所以我决定把粘性位置彻底搞清楚。

探索粘性定位

在摆弄它的过程中，我很快就注意到了：当一个具有 样式的元素被包装，且它是包装元素中唯一的元素时，这个被定义为 的元素就不会粘住。

当我在包装元素中添加更多元素时，它就能开始正常工作了。

这是为什么？

这是因为当一个元素被赋予 样式时，粘性项目的容器是它可以粘贴的唯一区域。 粘性元素没有任何要浮动的元素，因为它只能浮动在同级元素上，作为唯一的子元素，它不能浮动。

怎样才能让 CSS 粘性定位起作用

CSS 粘性定位有两个主要部分，粘性元素（sticky item）和粘性容器（sticky container）。

粘性元素—— 是我们用位置定义的 样式。 当视口位置与位置定义匹配时，该元素将会浮动，例如： 。

例：

粘性容器—— 是包装粘性元素的 HTML 元素。 这是粘性元素可以浮动的最大区域。

当你定义一个具有 样式的元素时，父元素会被自动定义为粘性容器！

记住这一点非常重要！ 容器是粘性元素的范围，并且该元素无法离开其所在的粘性容器。

这就是为什么在前面的例子中，粘性元素没有被粘住的原因：这个粘性元素是粘性容器中唯一的子元素。

CSS 粘性定位的示意图：

粘性元素与粘性容器

查看在CodePen上的例子：

https://codepen.io/elad2412/pen/QYLEdK

理解 CSS 的粘性行为

正如我前面说过的那样，CSS 粘性定位的行为与所有其他 CSS 定位不一样，但从另一个角度来说，它们也有一些相似之处。我来解释一下：

相对（或静态）—— 粘性定位元素类似于相对和静态位置，因为它保留了 DOM 中的自然间隙（留在流中）。

固定—— 当元素被粘住时，它的行为与 完全相同，浮动在与视口的相同位置，并从流中移除。

绝对—— 在粘贴区域的末尾，元素会停止，并堆叠在另一个元素的顶部，就像一个绝对定位的元素被放在一个 容器内的行为。

粘在底部？

在大多数情况下，您可以使用粘性定位将元素粘贴到顶部，如下所示：

这正是它被设计的初衷，而在此之前，只能使用JavaScript完成这个功能。

但你也可以使用它把元素粘到底部。 这意味着你可以把页脚定义为粘性，并且在向下滚动时使它看起来总是被粘在底部。 当到达粘性容器的末端时，元素会停在它的自然位置。 最好是在以粘性容器底部为自然位置的元素上使用它。

完整示例：

HTML

CSS

去CodePen查看演示效果：https://codepen.io/elad2412/pen/MZZVjw

我在开发中常用它来粘贴摘要表，也会用在粘性页脚导航上，这种方法非常适合。

浏览器支持

除了老 IE 浏览器外，所有流行的现代浏览器都支持粘性定位。

如果用在 Safari 浏览器上，你需要添加 前缀。

超过86%的浏览器支持粘性定位

最后的话

本文到此就结束了，我希望你能喜欢这篇文章，并从我的经验中学习到一些东西。

如果你喜欢这篇文章，我会非常感谢你的掌声和分享 :-)

求分享

如果你觉得这篇文章对你有帮助，请点击右下角的 “好看” 并分享给小伙伴们

下面夹杂一些私货：也许你和高薪之间只差这一张图

2019年京程一灯课程体系上新，这是我们第一次将全部课程列表对外开放。

愿你有个好前程，愿你月薪30K。我们是认真的 ！

唠一唠怎样才能拿高薪