Question

我有一个多页的Jquerymobile 1.2文件。当我导航到需要滚动的页面时，页脚不再固定，而是跳到第一个滚动页面。当我松开手指时，页脚会跳回原位。当我在多页文档中的任何其他页面上重复该过程并随后滚动时，不再出现此效果。

以下是页脚的代码 - 这用于多页文档中的所有页面（请注意它也链接到几个外部文件）：

<div data-role="footer" class="nav-rp" data-theme="a" data-position="fixed" data-id="myfooter">
    <div data-role="navbar" class="nav-rp" >
        <ul>
            <li><a rel="external" href="index.html#index"  class="icon-index" data-icon="custom">Home</a></li>
            <li><a rel="external" href="index.html#route-1" class="icon-route" data-icon="custom">Route</a></li>
            <li><a rel="external" href="gallery.html" class="icon-gallery" data-icon="custom">Gallery</a></li>
            <li><a href="businesses.html" rel="external" class="icon-business" data-icon="custom">Business</a></li>
        </ul>
    </div>
</div>

任何指导都将不胜感激。

Answer 1

认为我已修复了我的问题 - 它与顶部的元视口标记有关。我包括了height = device-height，这似乎可以解决问题。

Answer 2

以下是解决此问题的一些有趣技巧

$('body').animate({scrollTop: window.screen.availHeight}, 1, function(){
        $('body').animate({scrollTop: "0px"}, 1);
    })

在iOS中完全适用于任何固定元素

Answer 3

这种情况发生在ios 5.11（在iPhone 3Gs上运行），ios 6.12（iPhone4上的Runninig），ios 6.0.1（在iPhone 5上运行）。我的应用与Phonegap 2.3一起运行。

此问题不仅仅是jQueryMobile问题，而是css位置修复问题。（或其他与css问题有关的内容）

“固定”页脚开始在第一个滚动条上移动。在此之后，页脚被固定。每次弹出屏幕键盘并滚动内容时，页脚都会再次松动。

@VoVaVc建议的答案修复了第一个滚动问题，但没有解决键盘打开滚动问题。为Studio4修复它的声明height=device-height对我的应用程序没有任何作用。

HTML：

 <div id="footernav">
            <div id="Button" class="navButton">
                <img class="naviImg" src="assets/icon.png">
                <span>###buttonTexts###</span>
            </div>
            <div id="secondButton" class="navButton">
                <img class="naviImg" src="assets/icon.png">
                <span>###buttonTexts###</span>
            </div>                
  </div>

容器的css

#footernav {
clear: both;
position: fixed !important;
left: 0;
bottom: 0;
width: 100%;
height: 9%;
-webkit-box-shadow:0 -3px 30px rgba(0, 0, 0, 0.65);
box-shadow:0 -3px 30px rgba(0, 0, 0, 0.65);
z-index: 9;
}

编辑：

我解决了所有黑客的母亲的问题：

    $('.formularInputRecipient', this.el).on('focus',function() {
        console.log("HIDE");
        $("#footernav", this.el).hide();
    });


    $('.formularInputRecipient', this.el).on('blur',function() {
        console.log("show");
        $("#footernav", this.el).show();
    });

SO。键盘与固定页脚混淆。因此，当我得到屏幕键盘（在我的情况下，单击文本输入字段）时，我隐藏了位于错误位置的页脚，当关闭键盘时，我再次显示它。

有时候没有时间找到合适的解决方案。

第一次滚动时，Jquerymobile / Phonegap / iOS页脚导航栏未固定

3 个答案: