用纯属 CSS 实现吸顶效果

[liangbus]

在网上看到一个这样的题：很多网站导航栏都有滚动吸顶的效果，能不能只通过 CSS 来实现，不用使用 JS

当时一看就懵了，还有这种操作？？不用 JS 怎么知道滚动距离啊.. 结果一查，还真有这样的黑科技

position: -webkit-sticky;
position: sticky;

sticky 有黏性的意思，其表现为 relative 和 fixed 的结合体，意思就是，元素在视窗内，就正常展示，元素跑到视窗以外，就要 fixed 在视窗上。

HTML

<div class="box"></div>
<div class="float-bar grey"></div>
<div class="float-bar blue"></div>
<div class="float-bar yellow"></div>
<div class="container"></div>

CSS

.container{
  height: 800px;
}
.box{
  height: 200px;
}
.float-bar{
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  height: 40px;
  z-index: 1;
  margin-bottom: 50px;
}
.grey{
  top: 0;
  background-color: #12f392;
}
.blue{
  top: 40px;
  background-color: #c2c9af;
}
.yellow{
  top: 80px;
  background-color: #109329;
}

使用方法如上，设置好元素的 position: sticky 属性后，设置对应的 top, right, bottom, left 值

这个东西确实还蛮实用的，然而并非是标准化下的产物，还曾经被 Chrome 抛弃过

参考来源： 杀了个回马枪，还是说说position:sticky吧 ——张鑫旭