如何“修复”页眉页脚位置使用 jquery mobile 并带有 data-position=“fixed”
我正在使用 jquery mobile，对于页眉/页脚，我使用 data-position="fixed"。
但是，当我们滚动页面时...页眉页脚消失并在滚动停止时重新出现。 有没有一种方法可以让它在您滚动时始终固定在屏幕上并显示？
我只能想到一种方法是应用固定位置而不是对这些元素使用 jquerymobile 。
i am using jquery mobile and for header/footer i am using data-position="fixed".
However, when we scroll the page... the header footer goes away ands reappear when scrolling stops..
Is there a way we could just make it fixed on the screen an show all the time you are scrolling ?
I can only think of a way is to apply position fixed and not use jquerymobile for these elements..
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我尽力让它发挥作用。如果您愿意，可以删除将页眉和页脚类从 .ui-fixed-overlay 更改为 .ui-fixed-inline 的函数，并从 .fade.in 和 .fade.out 中删除 webkit 动画，但我已经没有锁防止窗户消失。但是，我相信 JQM 仅在滚动后重新计算页眉和页脚元素的位置。
我将以下 css 放在页面 div 中以删除 webkit 动画。
.ui-固定内联{
不透明度：1！重要；
显示：阻止！重要；
-webkit-动画名称：无！重要；
}
.淡入、.淡出 {
不透明度：1！重要；
-webkit-动画名称：无！重要；
显示：阻止！重要；
}
我知道这不是你想要的，但它确实加速了页眉和页脚元素的重新出现（它看起来有点断断续续）。除非你想重写控制页眉和页脚定位的 JQM javascript，否则我不认为有任何简单的方法可以做到这一点，因为 JQM 固定位置代码是为了在用户滚动后重新定位而构建的。如果我找到办法，我会继续寻找并编辑这个答案。
I tried my best to get this to work. If you want you can delete the function that changes the header and footer class from .ui-fixed-overlay to .ui-fixed-inline and remove the webkit animation from .fade.in and .fade.out, but I've had no lock preventing the windows from disappearing. However, I believe JQM only recalculates the position of the header and footer elements after you scroll.
I put the following css in page div to remove the webkit animation.
.ui-fixed-inline {
opacity: 1!important;
display:block!important;
-webkit-animation-name:none!important;
}
.fade.in, .fade.out {
opacity: 1!important;
-webkit-animation-name:none!important;
display:block!important;
}
I know this is not what you want but it does speed up the reappearance of the header and footer elements (it looks a bit choppy.) Unless you want to rewrite the JQM javascript that controls the header and footer positioning, I don't think there is any easy way to do this as the JQM fixed position code is built to re-position after the user scrolls. I'll keep looking and edit this answer if I find a way.
Chase 代码的简单版本对我来说效果很好：
请注意，点击隐藏工具栏使用相同的淡入淡出属性，因此需要以下内容：
A simpler version of Chase's code works fine for me:
Note that tap-to-hide toolbars uses this same fade property, so the following is required: