Question

我使用jquerymobile作为android phonegap应用程序。我想创建一个贴在屏幕底部的页脚（所以它一直显示），即使你必须在页面上滚动。现在这工作了一半。当我在模拟器中测试它时，向下滚动页面并单击屏幕（使用鼠标），标题会跳起（请参阅示例：http://tinyurl.com/pdv6nlp和http://tinyurl.com/p6xycr9

我的代码很基本：

<div data-role="page" id="blog" style="background-image:url(img/bg_hdpi.png); background-repeat:no-repeat; background-position:top center; background-attachment:scroll; background-color:#d7d8d8;">


<div data-role="content">   
    <div id="contentTXT">
        <div id="outputblog"></div>
        <img src="img/spacer.gif" height="60" width="100">
    </div>  
</div><!-- /content -->

<div data-role="footer" data-position="fixed" >
    <div style="float:left;"><a href="#" onclick="history.back(); return false">back</a></div>
    <div style="float:right;"><a href="#foo" data-transition="flip">home</a></div>
</div>
</div>

有人能帮助我吗？

Answer 1

如果您使用固定的css位置会破坏旧设备，如黑莓，旧款iphone和旧版Android，因此仅适用于Android 4.x.

要正确使用jquery移动属性，请在页脚中再添加一个标记，以便将其固定在屏幕底部。

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div><a href="#" onclick="history.back(); return false">back</a></div>
    <div><a href="#foo" data-transition="flip">home</a></div>
</div>

即使您滚动或点按正文，点击切换也会保留页脚。

Answer 2

几行CSS应该解决这个问题：

position:fixed; 
bottom:0;

与您的页脚div一起使用：

<div data-role="footer" data-position="fixed" style="position:fixed;bottom:0;">

Answer 3

如果使用1.1或更高版本，请在页眉和页脚中添加data-tap-toggle =“false”，如此处所述。

Jquerymobile页脚移动

3 个答案: