CSS层级小技巧！如何在滚动时自动添加头部阴影？

在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。比如下面这个例子，注意观察头部阴影

可以看到，只有滚动以后才出现阴影。一般情况下，使用 JS 监听滚动事件动态添加类名就可以实现，不过经过我的一番尝试，发现这种效果仅仅使用 CSS 也能轻易实现，下面是实现效果

你也可以提前访问 CSS auto header shadow(juejin.cn)查看实际效果。那 如何实现的呢，花两分钟时间看看吧~

一、头部固定定位

假设有这样一个布局

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

简单修饰一下

header{background: #fff;font-size: 20px;padding: 10px;
} 

头部固定定位有很多种方式，比较常见的是使用 fixed定位

header{position: fixed;top: 0
} 

但是，fixed定位是不占空间的，会导致遮挡内容区域，所以