JavaScript的粘性定位及新的标准（CSS Position: Sticky）

当用户滚动到某个点时粘贴元素是现代网页设计中的常见模式。您会看到它应用于顶部导航、侧边栏、共享链接，或者可能是广告块；在用户滚动时保持视口内的可见性。

从历史上看，我们需要 javascript 来做到这一点。然而，粘性行为已经成为一个新的标准（css position: sticky），让我们可以用纯 CSS 来实现效果。让我们来看看它是如何工作的！

粘性位置

sticky 是 position 属性的新（ish）值，作为 CSS3 布局模块规范的一部分添加。它的作用类似于 relative 定位，因为它不会从文档流中删除任何内容。换句话说，粘性元素对相邻元素的位置没有影响，并且不会折叠其父元素。

给定以下示例，我们将 #sidebar 位置设置sticky 为 top: 10px。top 值是必需的，它指定元素将粘贴到视口顶部边缘的距离。

#sidebar {
    position: -webkit-sticky; // required for safari
    position: sticky;
    top: 0; // required as well.
}

现在，当我们滚动页面时，当侧边栏与视口顶部的距离达到 0时，侧边栏应该粘住，有效地给我们一个 fixed 位置。换句话说，它 sticky 是一种介于 relative 和 fixed 位置之间的混合体。

See the Pen Sticky Position 1 by Envato Tuts+ (@tutsplus) on CodePen.

嵌套

此外，CSS position: sticky 将在滚动框或溢出元素中工作。这次我们将设置为 top 以便在侧边栏固定15px位置时在侧边栏上方留出更多空间（是的，这是一个词）。

See the Pen Sticky Position, Scrolling Boxes by Envato Tuts+ (@tutsplus) on CodePen.

侧边栏将沿父级的高度保持粘性（即：当父级的底部到达侧边栏的底部时，它会再次将其“推”出页面。）

JavaScript的粘性定位及新的标准（CSS Position: Sticky）第1张

容易，不是吗？

支持

在过去的几年中，浏览器对 CSS 位置的支持：sticky有了巨大的飞跃。从图表中您会看到它具有出色的覆盖率，尽管许多支持的浏览器（例如 chrome 和 Edge，它们都使用 Blink 渲染引擎）在将 CSS Sticky 应用于<thead>或<tr>元素时仍然很困难。

此外，如前所述，Safari 提供全面支持，但需要使用 -webkit-前缀。

JavaScript的粘性定位及新的标准（CSS Position: Sticky）第2张

浏览器对 CSS 位置的支持：粘性

使用 Polyfill

为了帮助我们不支持的浏览器（现在不是很多），我们可以使用 Oleg Korsunsky 开发的 stickyfill。polyfill 在各种情况下都能很好地工作。无论指定的元素有填充、边距、边框、浮动还是使用相对单位（如 em 和百分比）形成，polyfill 都会准确地模仿 CSS sticky 位置行为。使用stickyfill同样直观。

首先，获取stickyfill.js（如果您更熟悉并且更喜欢使用jquery 来选择元素，可以选择使用jQuery）。在您的 html 文档中链接这些库。然后用指定的元素启动stickyfill，如下：

var sidebar = document.getElementById('sidebar');
Stickyfill.add(sidebar);

如果您使用的是 jQuery，则可以改为编写以下代码：

$('#sidebar').Stickyfill();

现在，我们的粘性侧边栏应该可以跨浏览器使用，包括 Chrome 和 Opera。polyfill 足够聪明，它只能在不支持的浏览器中运行，否则它将被完全禁用，为浏览器的本机实现搁置一旁。

See the Pen Sticky Position with StickyFill by Envato Tuts+ (@tutsplus) on CodePen.

注意事项

sticky 在您尝试并在您的网站上使用位置之前，还有一些其他事项需要注意：

首先，父容器的高度应该大于粘性元素。
polyfill 有它自己的缺点，它不能在溢出的盒子中工作。
在撰写本文时，还没有特定的 JavaScript 事件处理程序用于 sticky 以识别元素何时被卡住。这样的事件可能很有用，例如，当元素被粘住（可能不是单词）时添加其他类。然而，使用 Intersection Observer api 有一种稍微笨拙的方法来实现这一点。阅读这篇文章以了解更多信息。