关于css:CSS层级小技巧如何在滚动时自动添加头部阴影

4次阅读

共计 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 障眼法”。假如有一层暗影，在默认状况下用一个元素遮挡起来，以下都称之为“遮挡物”。这里须要思考好各个局部的层级关系，略微有些简单，如下所示（侧面层级关系图）

层级关系为：头部 > 遮挡物 > 暗影 > 内容

在滚动过程中，暗影就主动就可见了，遮挡物正好又会被头部遮住，留神，遮挡物和内容是一起滚动的，动静演示如下

原理就是这样，上面看具体实现

依据以上原理，这里须要增加一个元素，暗影和遮挡物都能够用伪元素生成

<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 比拟乏味的中央吧~ 最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤