Question

我正在使用jQuery Mobile创建一个网站。

如何保持jquery移动页眉和页脚的固定？我只想要内容滚动（就像它在iPhone应用程序中发生的那样），并保持页眉和页脚固定在顶部和底部。

有什么建议吗？

Answer 1

将此属性添加到页眉/页脚div：

        <div data-role="header" data-position="fixed">
            <h1>Header Page 1</h1>
        </div>

另外，你可能会看看这个： http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

Answer 2

我使用jquery mobile修复的问题是页眉和页脚淡出。我想这将是他们将来会纠正的东西，但除了Dan建议的iscroll之外，还有jquery移动scrollview和wink工具包。我使用jquery移动滚动视图获得了良好的效果但是没有运气iscroll或wink

1）Jquery移动Scrollview

2）Wink Toolkit

Answer 3

另一种选择是查看iScroll：http://cubiq.org/iscroll

Answer 4

要启用此工具栏要素类型，请将data-fullscreen =“true”属性和data-position =“fixed”属性应用于页眉和页脚div元素。该框架还将取消设置内容容器的填充（ui-content）

  <div data-role="header" data-position="fixed" data-fullscreen="true">
        <h1>Header Page 1</h1>
    </div>

Answer 5

另一种方法是使用http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html（jquery.mobile.scrollview.js，scrollview.js和easing.js）并将data-scroll =“true”放在页面div标签中，如下所示：{ {3}}。

到目前为止我的工作做得很好。

干杯，

电子

Answer 6

使用iScroll v4。保持页眉和页脚固定，仅滚动内容。 iScroll需要一个包装器DIV和子元素。在下面的示例中，content_items是包含要滚动的项目的子div。我注意到你不能在一个HTML元素中组合data-role =“content”和iScroll的包装器DIV！。

<script type="text/javascript">
var myScroll;

$(document).ready(function () {

    myScroll = new iScroll('wrapper');

});

</script>
<div data-role="page"> 
    <div id="header" data-role="header" data-position="fixed"></div>
    <div id="content" data-role="content" class="contentcontainer contentsearched">
        <div id="wrapper">
            <div id="content_items" class="content_items"></div>
        </div>
    </div>
    <div id="footer" data-role="footer" data-position="fixed">
        <div data-role="navbar"></div>
    </div> 
</div>

Answer 7

我建议您尝试最新的jquery-mobile版本（1.1.0-rc）。它修复了这个错误。

看看here

Answer 8

对于iOS 6,7和8，这个黑客似乎解决了这个问题并触发重绘以正确地替换iPod，iPhone和iPad上的固定标题（有或没有面板）。注意：我们测试iOS设备，只在这种情况下添加此事件*。

if (iOS()) {
    $(document).on('blur', 'input:not(:submit), select, textarea', function () {
        var paddingBottom = parseFloat($(".ui-mobile-viewport, .ui-page-active").css("padding-bottom"));
        $(".ui-mobile-viewport, .ui-page-active").css("padding-bottom", (paddingBottom + 1) + "px");
        window.setTimeout(function () {
            $(".ui-mobile-viewport, .ui-page-active").css("padding-bottom", paddingBottom + "px");
        }, 0);
    });
}

* iOS测试：

var iOS() = function () {
    var userAgent = window.navigator.userAgent.toLowerCase();
    return (/iphone|ipad|ipod/).test(userAgent);
}

如何保持jquery移动页眉和页脚固定？

8 个答案: