创建类似于移动 Gmail 的固定容器
我想创建一个固定容器,附加到移动浏览器(特别是 iOS 和 Android 设备上)视口的顶部。 Gmail 在其移动网站上有一个很棒的固定菜单栏,但只有当您实际在移动设备上查看它时,它似乎才能正常运行(因此我无法追踪这是如何完成的)。
有谁知道 Gmail 是如何做到这一点的?
我目前正在将一个函数附加到 window.onscroll
来更改 div 的位置,但就目前而言,它不会持续更新位置。一旦开始滚动,直到停止滚动后才会发生重新定位。这就是我正在努力克服的。重新定位功能本身工作正常 - 这更多的是一个时间问题。
有什么建议吗?
I want to create a fixed container that attaches to the top of the viewport on mobile browsers, specifically on iOS and Android devices. Gmail has an awesome fixed menu bar on their mobile site, but it only seems to function correctly when you actually view it on a mobile device (so I am not able to trace how this is being accomplished).
Does anyone know how Gmail is accomplishing this?
I'm currently attaching a function to window.onscroll
that changes the position of the div, but as it is right now, it doesn't continuously update the position. Once you start scrolling, the repositioning doesn't happen until after you stop scrolling. This is what I'm trying to overcome. The repositioning function itself works correctly - it's more of a timing issue.
Any suggestions?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
谷歌写了一篇关于他们的方法的文章。
https://developers.google.com/mobile/articles/webapp_fixed_ui
Google wrote an article about their approach.
https://developers.google.com/mobile/articles/webapp_fixed_ui
我非常确定您可以使用 jquery mobile 或仅使用常规 css 来完成此操作。您可以在此处找到有关 jq mobile 的更多信息: http://jquerymobile.com/ 。我不确定您可以立即使用纯CSS,但我知道可以将一些东西附加到顶部,例如工具栏。
I'm pretty sure that you can do this using jquery mobile or just regular css. You can find more info about jq mobile here: http://jquerymobile.com/ . I'm not sure offhand the plain css you can use but I know it's possible to attach something to the top like a toolbar.