3

我有一个多页 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>

任何指导将不胜感激。

4

3 回答 3

6

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

于 2012-11-09T17:15:45.577 回答
1

这里有一些有趣的技巧来解决这个问题

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

完美适用于任何固定元素的 iOS

于 2012-12-19T15:44:44.483 回答
0

这发生在ios 5.11(Running on iPhone 3Gs), ios 6.12(Running on iPhone4) , ios 6.0.1 (Running on 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();
    });

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

有时没有时间寻求适当的解决方案。

于 2013-04-09T09:55:27.667 回答