CSS粘性定位是怎样工做的

翻译：疯狂的技术宅
原文： https://medium.com/@elad/css-...

---

本文首发微信公众号：jingchengyideng
欢迎关注，天天都给你推送新鲜的前端技术文章

---

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

究其缘由有两个：

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

第二个缘由是不少开发者并不能彻底理解其工做原理背后的逻辑，这就是个人切入点。

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

在3年前，有四种 CSS 定位： static、 relative、 absolute 和 fixed。

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

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

个人第一个粘性定位

可能不少人都玩过粘性定位。我已经接触过一段时间了，直到我意识到本身并非彻底理解它。

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

例：

.some-component{
    position: sticky;
    top: 0;
}

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

探索粘性定位

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

<!-- DOESN'T WORK!!! -->
<style>
    .sticky{
        position: sticky;
        top: 0;
    }
</style>
<div class="wrapper">
   <div class="sticky">
        SOME CONTENT
   </div>
</div>

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

这是为何？

这是由于当一个元素被赋予 position: sticky 样式时，粘性项目的容器是它能够粘贴的惟一区域。 粘性元素没有任何要浮动的元素，由于它只能浮动在同级元素上，做为惟一的子元素，它不能浮动。

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

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

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

例：

.some-component{
    position: sticky;
    top: 0px;
}

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

当你定义一个具备 position:sticky 样式的元素时，父元素会被自动定义为粘性容器！
记住这一点很是重要！ 容器是粘性元素的范围，而且该元素没法离开其所在的粘性容器。

这就是为何在前面的例子中，粘性元素没有被粘住的缘由：这个粘性元素是粘性容器中惟一的子元素。

CSS 粘性定位的示意图：

粘性元素与粘性容器

查看在CodePen上的例子：

https://codepen.io/elad2412/p...

理解 CSS 的粘性行为

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

相对（或静态）—— 粘性定位元素相似于相对和静态位置，由于它保留了 DOM 中的天然间隙（留在流中）。
固定 —— 当元素被粘住时，它的行为与 position: fixed 彻底相同，浮动在与视口的相同位置，并从流中移除。
绝对 —— 在粘贴区域的末尾，元素会中止，并堆叠在另外一个元素的顶部，就像一个绝对定位的元素被放在一个 position: relative 容器内的行为。

粘在底部？

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

.component{
    position: sticky;
    top: 0;
}

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

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

完整示例：

HTML

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-content">MAIN CONTENT</div>
  <footer class="main-footer">FOOTER</footer>
</main>

CSS

.main-footer{     
     position: sticky; 
     bottom: 0;
}

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

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

浏览器支持

• 除了老 IE 浏览器外，全部流行的现代浏览器都支持粘性定位。
• 若是用在 Safari 浏览器上，你须要添加 -webkit 前缀。

position: -webkit-sticky; /* Safari */  
position: sticky;

最后的话

本文到此就结束了，我但愿你能喜欢这篇文章，并从个人经验中学习到一些东西。
若是你喜欢这篇文章，我会很是感谢你的掌声和分享 :-)

---

本文首发微信公众号：jingchengyideng

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章