不使用JavaScript的粘性定位（感谢CSS位置：粘性）

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

从历史上看，我们需要JavaScript才能做到这一点。 但是，粘性行为已成为新的标准（CSS position: sticky ），使我们能够使用纯CSS达到效果。 让我们看看它是如何工作的！

粘性位置

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

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

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

现在，当我们滚动页面时，当侧边栏到视口顶部的距离达到0 ，侧边栏应该会粘住，从而有效地为我们提供了fixed位置。 换句话说， sticky是relative位置和fixed位置之间的混合体。

套料

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

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

很简单，不是吗？

支持

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

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

使用Polyfill

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

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

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

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

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

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

注意事项

在您尝试并在网站上使用sticky位置之前，还需要注意其他几件事：

• 首先，父容器的高度应大于粘性元素。
• 该polyfill有其自身的缺点，因为它不能在溢出的盒子中工作。
• 在写这篇文章的时候，有一个粘识别当元素被卡住没有特定JavaScript事件处理程序。 此类事件可能很有用，例如，在元素固定后（可能不是单词）添加其他类。 但是，可以使用Intersection Observer API来实现此目的。 阅读这篇文章以了解更多信息。

总结思想

如果您只需要简单的粘滞元素，则CSS粘滞位置是一种出色的工具。 如果您的需求超出此范围（例如，您想在粘性元素上添加一些奇特的效果），那么最好还是选择一个JavaScript解决方案，要么是自写的，要么选择像Waypoints.js这样 具有粘性的库模块 。

其他参考

• 为什么（Sticky）JS不理想？
• CSS粘性工作草案

学习CSS：完整指南

无论您是刚刚开始使用基础知识还是想探索更高级CSS，我们都已构建了完整的指南来帮助您学习 CSS。

翻译自: https://webdesign.tutsplus.com/tutorials/sticky-positioning-with-nothing-but-css--cms-24042