彻底明白粘性定位 - position: sticky

粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的肴杂。元素在超过特定阈值前为相对定位，之后为固定定位。比方:
.sticky-header {  position: sticky;  top: 10px; }在 视口滚动到元素 top 间隔小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部间隔 10px 的位置，直到视口回滚到阈值以下。
粘性定位常作用在导航和概览信息(标题，表头，使用栏，底部批评等)上。如许，用户在浏览具体信息时，也能看到信息的概览和做一些使用，给用户带来便捷的使用体验。
粘性定位看着很简朴，但也很轻易出现不见效的环境。为资助各人彻底明白粘性定位，本文会从 3 个方面来先容：

• 粘性定位的原理。
  
• 不见效的环境。
  
• 具体的例子。
  

原理

为便于明白粘性定位，这里引入四个元素：视口元素，容器元素，粘性束缚元素 和 sticky 元素。它们的关系如下：

视口元素：体现内容的地区。会设置宽，高。一样寻常会设置 overflow:hidden。
容器元素：离 sticky 元素迩来的能滚动的先人元素。
粘性束缚元素：粘性定位的父元素。偶然，也会出现粘性束缚元素就是容器元素的环境。
sticky 元素：设置了 position: sticky; 的元素。
滚动时，sticky 元素设置的 left, right, top, bottom 的值相对的是容器元素。当粘性束缚元素滚出视口时，sticky 元素也会滚出视口。
不见效的环境

环境1: 未指定 top, right, top 和 bottom 中的任何一个值

此时，设置 position: sticky 相当于设置 position: relative。
要见效，要指定 top, right, top 或 bottom 中的任何一个值。
环境2: 垂直滚动时，粘性束缚元素高度小于即是 sticky 元素高度

不见效的缘故因由：当粘性束缚元素滚出视口时，sticky 元素也会滚出视口。粘性束缚元素比 sticky 元素还小，sticky 元素没有体现固定定位状态的机遇。
同样的，水平滚动时，粘性束缚元素宽度小于即是 sticky 元素宽度时，也不访问效。
环境3: 粘性束缚元素和容器元素之间存在 overflow: hidden 的元素

该环境的示例代码:
<divHTML 布局如下：
<divHTML 布局如下：
<!-- 视口元素 --><div必要实现：

• 左侧事项菜单总在最左侧。
  
• 菜单的头部和时间轴吸顶。
  
• 时间轴的年总在月的最左边。
  

实当代码有点多，就不在这里贴了。获取完备源码，关注公众号: 前端GOGOGO，复兴: 粘性定位。
末了

粘性定位的浏览器兼容性也很好：95.76% 的浏览器支持[1]。各人可以放心的使用~
保举阅读:

• position:sticky 粘性定位的几种奇妙应用[2]
  

参考资料

[1]95.76% 的浏览器支持: https://caniuse.com/css-sticky
[2]position:sticky 粘性定位的几种奇妙应用: https://segmentfault.com/a/1190000039858711

原文：https://jishuin.proginn.com/p/763bfbd62bc0