如何用两行 CSS 制作粘性侧边栏

您是否曾经遇到过这样的情况：某个元素会“粘”在屏幕上，并随着您向下滚动页面而移动？这就是我所说的“粘性侧边栏”。为了调试这种现象，我曾花费大量时间与遗留代码斗争。过去，开发人员使用 JavaScript 来构建此功能，方法是在浏览器滚动事件发生时重新计算侧边栏的位置。这不仅维护起来很复杂，而且性能成本高昂。

最近，我很高兴地发现，所有主流桌面浏览器（Chrome、Firefox、Edge 和 Safari）现在都支持 CSS 属性position: sticky。（除了 Chrome 中一些表格元素的一个 bug。）Edge 是最后一个支持该属性的浏览器，于 2017 年 10 月发布了 16 版，您可以在caniuse.com上查看。这意味着我们只需两行 CSS 代码就可以创建一个粘性侧边栏，而且无需 JavaScript！让我来演示一下。

首先设置两个 div。一个代表主页内容，应该延伸到屏幕底部。第二个是侧边栏，我们会把它做得比屏幕长度短一些，这样在示例中就能清楚地看到它的移动。我们使用 flex 将它们并排放置，因为现在是 2018 年，而且我喜欢 flex。

使用以下 HTML 和 CSS：

<div class="wrapper">
  <div class="main">
    Main content
  </div>
  <div class="sidebar">
    Sticky sidebar
  </div>
</div>

.wrapper {
  display: flex;
  justify-content: space-between;
}

.main,
.sidebar {
  border: 3px solid black;
  padding: 15px;
  background-color: #fff;
}

.main {
  width: 60%;
  height: 150vh;
}

.sidebar {
  width: 25%;
  height: 25vh;
}

body {
  background-color: #ccc;
  font-family: sans-serif;
  padding: 10px;
}

这给了我们两个如下所示的元素：

请注意，主元素和侧边栏元素的高度是使用 vh 单位设置的。100vh 是当前视口的高度，因此将主 div 的高度设置为 150vh 会使其高度达到屏幕高度的 1.5 倍。

但是侧边栏还没有固定！当你向下滚动页面时，侧边栏不会跟随滚动。我们需要做的就是添加两行 CSS 代码来解决这个问题：

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

（好吧，我撒谎了，三行代码是为了与-webkit-前缀兼容 Safari。）就这样，向下滚动页面，侧边栏就会粘在屏幕顶部并跟随你向下！

该position: sticky属性指示元素紧贴屏幕（MDN 对此的解释比我更好），而该top值指示元素在滚动时相对于屏幕的位置。我们可以将其更改为top: 5%留出间隙，或者例如left: 0，取决于滚动的方向。

这是我之前在 CodePen 上制作的一个：

尝试将侧边栏的高度改为 110vh，看看它是如何停在屏幕底部的。太棒了！

我可以在生产中使用position:sticky吗？

position: sticky这仍然是一个实验性的 API，因此请谨慎使用。请在此处阅读规范草案。在做出此类决定时，请务必考虑您支持的浏览器。将此信息与 caniuse 结合使用，以做出明智的决定。请使用caniuse 上所有浏览器的统计数据，而不仅仅是最新版本。问问自己，如果侧边栏不固定，会如何影响用户体验？网站会彻底崩溃吗？或者他们会失去一个不错的装饰功能吗？

一如既往，这取决于你的具体应用，并没有一个适用于所有情况的答案。但现在我们可以纯粹使用 CSS 来构建这样的功能，并且 CSS 工具包中也有一个便捷的工具，这真的很酷。