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

2018-10-31 11:03:11 +08:00
 caopi

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

2427 次点击
所在节点    前端开发
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
最简单的就是用两个搜索栏了吧，控制隐藏显示就可以了
xycool
2018-10-31 15:25:20 +08:00
哦，纯 css 啊，无视楼上吧
caopi
2018-10-31 15:55:28 +08:00
@TomatoYuyuko 原来如此，我就是想问问能不能这种纯 css 实现
zxcvsh
2018-10-31 16:24:24 +08:00
应该能吧，记得好久以前看到一个纯 CSS 的动图，打那以后觉得 CSS 无所不能了

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/502910

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX