请问移动端页面滚动导航栏变成不透明要如何实现呢

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2222 天前的主题，其中的信息可能已经有所发展或是发生改变。

RT。类似京东主页的效果，搜索导航栏原本是透明背景色，页面一滚动就会加上外阴影和背景色。使用纯 css 能完成吗？

8 条回复

caopi

2018-10-31 11:27:38 +08:00

类似这个 m.jd.com 里的效果

lisia

2018-10-31 11:39:35 +08:00

监听屏幕滚动事件，然后滚动高度大于导航栏高度设置相应的 css

caopi

2018-10-31 14:37:27 +08:00

也没有纯 css 的实现呢？

TomatoYuyuko

2018-10-31 15:19:00 +08:00

这个是 js 做的你可以打开 f12 看一下，相当于是做了两个不同的搜索栏，监听滚动触发切换

xycool

2018-10-31 15:24:51 +08:00 via iPhone

最简单的就是用两个搜索栏了吧，控制隐藏显示就可以了

xycool

2018-10-31 15:25:20 +08:00 via iPhone

哦，纯 css 啊，无视楼上吧

caopi

2018-10-31 15:55:28 +08:00

@TomatoYuyuko 原来如此，我就是想问问能不能这种纯 css 实现

zxcvsh

2018-10-31 16:24:24 +08:00 via iPhone

应该能吧，记得好久以前看到一个纯 CSS 的动图，打那以后觉得 CSS 无所不能了