不需要 JS！仅用 CSS 也能达到监听页面滚动的效果！

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

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

一、头部固定定位

假设有这样一个布局。

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

简单修饰一下

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

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

header{
 position: fixed;
 top: 0
}

但是，fixed定位是不占空间的，会导致遮挡内容区域，所以一般还需要预留头部一部分空间出来，比如这样。

main{
 margin-top: 头部的高度
}

在这里，我更推荐使用sticky定位，在吸顶的同时，还能保留原有的占位。

header{
 position: sticky;
 top: 0
}

效果如下，只是没有阴影。