共计 2590 个字符，预计需要花费 7 分钟才能阅读完成。
欢送关注微信公众号：前端侦探
在网页中，常常会用暗影来突出层级关系，特地是顶部导航，但有时候设计感觉没必要一开始就显示暗影，只有滚动后才呈现。比方上面这个例子，留神察看头部暗影
能够看到，只有滚动当前才呈现暗影。个别状况下，应用 JS 监听滚动事件动静增加类名就能够实现，不过通过我的一番尝试，发现这种成果仅仅应用 CSS 也能轻易实现，上面是实现成果
你也能够提前拜访 CSS auto header shadow(codepen.io) 查看实际效果。那 如何实现的呢，花两分钟工夫看看吧~
一、头部固定定位
假如有这样一个布局
<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
}成果如下，只是没有暗影
二、CSS 实现原理
实现这个成果，须要一点点“CSS 障眼法”。假如有一层暗影，在默认状况下用一个元素遮挡起来，以下都称之为“遮挡物”。这里须要思考好各个局部的层级关系，略微有些简单，如下所示（侧面层级关系图）
层级关系为：头部 > 遮挡物 > 暗影 > 内容
在滚动过程中，暗影就主动就可见了，遮挡物正好又会被头部遮住，留神，遮挡物和内容是一起滚动的，动静演示如下
原理就是这样，上面看具体实现
三、CSS 具体实现
依据以上原理，这里须要增加一个元素，暗影和遮挡物都能够用伪元素生成
<header>LOGO</header>
<shadow></shadow>
<main> 很多内容文本 </main>这里暗影的地位是固定的，也不须要占据空间，所以能够间接用 fixed 定位，也能够不设置 top 值，因为默认就位于非定位时的地位（又体现出 sticky 的益处了），也就是头部上面
shadow::before{
content: '';
box-shadow: 0 0 10px 1px #333;
position: fixed; /* 无需 top 值 */
width: 100%;
}
fixed定位在不设置 top 或者 left 值时，依然位于原先地位，然而会在这个地位固定下来
遮挡物能够用纯色填充，而且须要追随内容滚动，也不须要占据空间，同时也为了晋升层级 ，能够设置一个absolute 定位
shadow::after{
content: '';
width: 100%;
height: 15px;
background: #fff;
position: absolute; /* 无需 top 值 */
}
absolute定位在不设置 top 或者 left 值时，依然位于原先地位，也会追随内容滚动
当初再来看看层级关系，头部、暗影、遮挡物都设置了定位，依据 dom 先后顺序，此时
层级关系为：遮挡物 > 暗影 > 头部 > 内容
头部应该是最高的，所以须要独自扭转一下层级
header{
/**/
z-index: 1;
}层级关系为：头部 > 遮挡物 > 暗影 > 内容
这样就实现了文章结尾所示成果，成果如下
三、更柔和的暗影
其实下面的成果曾经很好了，然而略微有点僵硬。仔细观察，在缓缓滚动过程中，暗影有一种“向上推动”的感觉，如下
有没有方法让这个过程更柔和一点呢？比方透明度的变动？
当然也是能够的，实现也比较简单。下面比拟僵硬的起因是，遮挡物是纯色的，如果换成 半透明突变 是不是就好一些呢？
shadow::after{
height: 30px;
background: linear-gradient(to bottom, #fff 50% , transparent);
}成果如下
这样暗影呈现的成果就不再是“向上推动”的成果，你感觉怎么样呢？
重点来了~上面是残缺 CSS 代码（20 行不到~）
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>你能够拜访在线链接 CSS auto header shadow(codepen.io)
四、总结和瞻望
以上就是全副分享内容了，是不是又把握一个 CSS 小技巧？用到了 3 个定位属性，简直零老本，复制几行代码，马上就能够用起来了，上面总结一下实现要点：
- 固定头部的布局举荐用
sticky实现，益处是能够保留头部占位，无需额定预留 - 整体实现思路是 CSS 障眼法和 CSS 层级，互相遮挡
fixed定位在不设置 top 或者 left 值时，依然位于原先地位，然而会在这个地位固定下来absolute定位在不设置 top 或者 left 值时，依然位于原先地位，也会追随内容滚动- 纯色遮挡在滚动时有些僵硬，半透明突变遮挡在滚动时会更加柔和
在将来，像这类滚动相干的交互都能够通过 @scroll-timeline 来实现，有趣味的能够提前理解这方面内容，只是当初简直不可理论生产应用（目前须要手动开启试验个性），能够意料，随着 CSS 新个性的一直倒退，像这类“CSS 奇技淫巧”必定会被官网逐渐代替，体验也会更加欠缺，但并，并不是说这些思考是无用了，理论需要千千万，官网不可能一一关照到，就算有布局，有草案，可能曾经是多年当前了，所以学习 CSS 肯定不要进行思考，进行设想，这大略也是 CSS 比拟乏味的中央吧~ 最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤
欢送关注微信公众号：前端侦探
