可以看到,只有滚动以后才出现阴影。一般情况下,使用 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 }
效果如下,只是没有阴影。