CSS 实现监听页面滚动的效果

实现要点：

1. 固定头部的布局推荐用 sticky 实现，好处是可以保留头部占位，无需额外预留
2. 整体实现思路是CSS 障眼法和 CSS 层级，相互遮挡
3. fixed 定位在不设置 top 或者 left 值时，仍然位于原先位置，但是会在这个位置固定下来
4. absolute定位在不设置 top 或者 left 值时，仍然位于原先位置，也会跟随内容滚动
5. 纯色遮挡在滚动时有些生硬，半透明渐变遮挡在滚动时会更加柔和

css

header{
  position: sticky;
  background: #fff;
  top: 0;
  font-size: 20px;
  padding: 10px;
  z-index: 1;
}
shadow::before{
  content: '';
  box-shadow: 0 0 10px 1px #333;
  position: fixed;
  width: 100%;
}
shadow::after{
  content: '';
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #fff 50% , transparent);
  position: absolute;
}

html

<header>LOGO</header>
<shadow></shadow>
<main>很多内容文本</main>

参考链接：mp.weixin.qq.com/s/kk5oXTAe7…