CSS层级小技巧：在滚动时自动添加头部阴影

CSS层级小技巧：在滚动时自动添加头部阴影

CSS层级小技巧：在滚动时自动添加头部阴影

实现效果：

滚动前

滚动后

CSS 实现原理

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

总结要点

固定头部的布局推荐用 sticky 实现，好处是可以保留头部占位，无需额外预留整体实现思路是CSS 障眼法和 CSS 层级，相互遮挡fixed 定位在不设置 top 或者 left 值时，仍然位于原先位置，但是会在这个位置固定下来absolute定位在不设置 top 或者 left 值时，仍然位于原先位置，也会跟随内容滚动纯色遮挡在滚动时有些生硬，半透明渐变遮挡在滚动时会更加柔和

在线Demo：​​清除默认样式 */ * { margin: 0; padding: 0; } .header { position: sticky; background: #fff; top: 0; font-size: 20px; padding: 10px; z-index: 1; font-size: 30px; text-align: center; } .author { text-align: left; } .shadow { pointer-events: none; } .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; } .main { line-height: 2; /* 顶部padding == 遮罩的高度 */ padding: 30px 20px 20px; }

参考​​​CSS层级小技巧！如何在滚动时自动添加头部阴影​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。