如何使用jquery mobile以data-position =“fixed”固定页眉页脚位置。

问题描述

我正在使用jquery mobile和header / footer，我正在使用data-position =fixed。

然而，当我们滚动页面...页眉页脚消失并且在滚动停止时重新出现。
是否有一种方法可以让您在滚动时一直显示在屏幕上？

解决方案

我尽力让这个工作。如果你想要，你可以删除将.ui-fixed-overlay改变为.ui-fixed-inline的页眉和页脚类的功能，并从.fade.in和.fade.out中删除webkit动画，但我已经没有锁定防止窗户消失。不过，我相信JQM只会在滚动后重新计算页眉和页脚元素的位置。

我在页面div中放入以下css以移除webkit动画。

.ui固定内联{
opacity：1！important;
显示：block！important;
-webkit-animation-name：none！important;
}
.fade.in，.fade.out {
opacity：1！important;
-webkit-animation-name：none！important;
显示：block！important;
}

我知道这不是你想要的，但它确实加快了页眉和页脚元素的重现（它看起来有点儿）除非您想重写控制页眉和页脚定位的JQM javascript，否则我不认为有任何简单的方法可以做到这一点，因为JQM固定位置代码是在用户滚动后重新定位的。如果找到方法，我会继续寻找并编辑这个答案。

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..

解决方案

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.

这篇关于如何使用jquery mobile以data-position =“fixed”固定页眉页脚位置。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！