创建类似于移动 Gmail 的固定容器

发布于 2024-11-14 04:05:32 字数 314 浏览 2 评论 0原文

我想创建一个固定容器,附加到移动浏览器(特别是 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

剩余の解释 2024-11-21 04:05:32

谷歌写了一篇关于他们的方法的文章。

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

半世晨晓 2024-11-21 04:05:32

我非常确定您可以使用 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文