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

【问题标题】：how to keep jquery mobile header and footer fixed?如何保持jquery移动页眉和页脚固定？
【发布时间】：2011-01-18 12:30:27
【问题描述】：

我正在使用 jQuery Mobile 制作网站。

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

有什么建议吗？

【问题讨论】：

标签： jquery mobile

【解决方案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

【讨论】：

这不适用于 iPhone 和 iPad，但适用于 Android 设备。
老兄，这是 2010 年初的帖子（早在最终 1.0 版本发布之前）。在 iOS 5 上的 iDevices 中，有可能固定 css 位置（在 iOS 5 之前，该位置是由jqmobile，滚动时淡出再入）
不得不说，我在 BB10 上使用data-position="fixed" 得到的结果……好坏参半。使用 here 找到的视口标签后效果更好——不是基于头脑的花哨的 JS！，但它仍然不是 100%。这是在 2013 年。

【解决方案2】：

我在使用 jquery mobile 时遇到的问题是页眉和页脚褪色。我想这是他们将来会纠正的事情，但除了 Dan 建议的 iscroll 之外，还有 jquery mobile scrollview 和 wink 工具包。我使用 jquery mobile scrollview 取得了不错的效果，但使用 iscroll 或 wink 没有运气

1) Jquery 移动滚动视图

2) 眨眼工具包

【讨论】：

有人在 iOS 设备上测试过吗？因为对我来说，屏幕只是卡住了，当我继续滑动时，最终工具栏仍然淡入/淡出......我专门谈论的是 Jquery mobile。
我在 iOS 上使用了 jquery 移动滚动视图。它工作得很好。话虽如此，我最终改用煎茶触摸。 Jquery 移动性能太差（每次单击按钮都会延迟）并且缺乏必要的控制。或许现在有所改善。编程肯定更有趣。
如果您绑定到“tap”和“touchstart”事件而不是“click”，延迟就会消失。
Link 1 Demo 和 Link 2 Demo 已死：S

【解决方案3】：

另一个选项是查看 iScroll：http://cubiq.org/iscroll

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

另一种方法是使用http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html（jquery.mobile.scrollview.js、scrollview.js 和 easing.js）并将 data-scroll="true" 放入页面 div 标签中，如下所示：scrollview for jQuery mobile tollbars *not* to be fixed .

到目前为止对我来说效果很好。

干杯，

E

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

看看here

【讨论】：

【解决方案8】：

对于 iOS 6、7 和 8，此 hack 似乎可以解决问题并触发重绘以正确替换 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);
}

【讨论】：