如您所见，只有滚动后才会出现阴影。一般情况下，用JS监听滚动事件，动态添加类名就可以实现，但是经过一些实验，我发现只用CSS就可以轻松实现这个效果。也可以提前访问CSSautoheadershadow(juejin.cn)[1]查看实际效果。那怎么实现呢，花两分钟看看~1.头部固定定位假设有这样的布局。很多内容文字简单修改header{background:#fff;字体大小：20px；padding:10px;}固定header的方式有很多种，比较常用的是固定定位。header{位置：固定；top:0}但是固定定位不占空间，会挡住内容区域，所以一般需要预留一部分头部空间，比如这个。main{margin-top:头部的高度}在这里，我推荐使用粘性定位，可以在吸顶的同时保留原有的空间。header{位置：粘性；top:0}具有以下效果，只是没有阴影。固定头部定位2.CSS实现原理要实现这种效果，需要一点“CSS技巧”。假设有一层阴影，默认情况下，它被一个元素遮挡，下面称为“occluder”。这里需要考虑各个部分的层级关系，有点复杂。如下图（侧层级关系图），层级关系为：head>occluder>shadow>content。在滚动过程中，阴影会自动变为可见。封堵器将再次被头部覆盖。请注意，遮挡物和内容一起滚动。动态演示如下。可以用伪元素生成元素、阴影和遮挡物很多内容文本其中阴影的位置是固定的，不需要占用空间，所以可以直接使用fixed定位，也可以不用设置top值，因为默认位置是在非定位位置（这也体现了sticky的好处），也就是under头部：影子::之前{内容：'';框阴影：0010px1px#333；位置：固定；/*不需要top值*/width:100%;}fixed定位在没有设置top或者left值的情况下仍然在原来的位置，但是会固定在这个位置遮挡物可以填充纯色，并且需要随着内容滚动而不占用空间。同时，为了提高层次，可以设置一个绝对定位的shadow::after{content:'';宽度：100%；高度：15px；背景：#fff；位置：绝对；/*没有top值*/}绝对定位在没有设置top或者left值的情况下依然在原来的位置，也会随着内容滚动现在我们来看层级关系，head,shadow,occluders的定位是放。按照dom的顺序，此时的层级关系是：occluder>shadow>header>content。header应该是最高的，所以需要改变layerheader{/**/z-index:1;}层级关系是：head>occluder>shadow>content3.更柔和的阴影上面的效果已经很好了，但有点僵硬。仔细观察，在缓慢滚动的过程中，影子有一种“向上推进”的感觉，略显生硬的效果如下图。有什么办法可以让这个过程更柔和吗？喜欢透明度的变化？当然也是可以的，实现起来也比较简单。上面说的比较生硬，因为遮挡物是纯色的。改成半透明渐变不是更好吗？阴影::之后{高度：30px；background:linear-gradient(tobottom,#fff50%,transparent);}效果如下：更柔和的效果，让阴影的效果不再是“向上推”的效果。你怎么认为？重点来了~下面是完整的CSS代码（不到20行~）header{position:sticky;背景：#fff；顶部：0；字体大小：20px；填充：10px；z-index:1;}shadow::before{内容:'';框阴影：0010px1px#333；位置：固定；宽度：100%；}阴影::之后{内容：''；宽度：100%；高度：30px；线性渐变（到底部，#fff50%，透明）；position:absolute;}HTML结构也很简单：很多内容文字可以访问在线链接CSSautoheadershadow(codepen.io)[2]orCSSautoheadershadow(juejin.cn)[3]四、总结与展望以上就是所有的分享内容。你想再掌握一点CSS吗？技能？使用了3个定位属性，几乎是零成本，复制几行代码，马上就可以使用。总结一下实现要点：固定表头的布局建议用sticky实现。优点是可以保留header，无需额外保留保留的整体实现思路是css蒙眼法和css层级，相互遮挡固定定位在没有设置top或者left值的时候还是在原来的位置，但是会固定在这个位置。绝对定位还是在没有设置top或者left值时的位置在原来的位置，纯色遮罩也会随着内容滚动滚动时遮挡有点生硬，半透明渐变遮挡滚动时会更柔和。以后可以通过@scroll-timeline来实现这种滚动相关的交互。有兴趣的可以提前了解这方面的知识，不过现在几乎不能用在实际生产中（目前需要手动启用实验性功能）。可以预料，随着CSS新特性的不断开发，这样的“CSS花样百出”一定会逐渐被官方所取代，体验会更加完美。然而，并不是说这些想法没有用。实际需求有几万个，官方不可能一一照顾。即使有计划和草稿，也可能是多年之后的事了，所以学习CSS千万不能停止思考和想象。也是css有趣的地方~最后，如果觉得对你有好处，对你有帮助，请点赞、收藏、转发???
