CSS层级小技巧!如何在滚动时自动添加头部阴影?

CSS层级小技巧!如何在滚动时自动添加头部阴影?插图亿华云

在网页中,经常会用阴影来突出层级关系,特别是顶部导航,但有时候设计觉得没必要一开始就显示阴影,只有滚动后才出现。比如下面这个例子,注意观察头部阴影。

CSS层级小技巧!如何在滚动时自动添加头部阴影?插图1亿华云

作家专区

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

CSS层级小技巧!如何在滚动时自动添加头部阴影?插图2亿华云实现效果

你也可以提前访问

THE END
Copyright © 2024 亿华云