Question

我在主html5正文中有一个页眉和页脚加上一个列表视图，但我遇到的问题是当listView很大时，它会滚动整个页面，包括标题。

我想要实现的目的是让listview可滚动而不是其他任何东西，以便页眉和页脚始终可见。

这可能在html5 / jquery中吗？

编辑：

这是我尝试过的。

<link href="src/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="src/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<body>
    <div data-role="page" id="page">
        <div data-role="header" data-position="fixed">
            <a href="" onclick="history.back(-1); return false;">Back</a>
            <h1>Claim Items</h1>
        </div>
        <div data-role="content">
            <h3 style="margin-left:1em">The Demo Title</h3>
            <ul data-role="listview" id="itemList" data-inset="true" data-scroll="true">
                <li><a href="#page2">1: demo</a></li>
                <li><a href="#page2">2: demo</a></li>
                <li><a href="#page2">3: demo</a></li>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed" class="ui-bar">
            <div data-role="navbar">
                <ul>
                    <li><a href="fdfd.html">Add an Item</a></li>
                    <li> <a href="">Remove an Item</a></li>
                    <li><a href="">Add comment</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

Answer 1

我认为您要求fixed toolbar：

在支持CSS position: fixed（大多数桌面浏览器，iOS5 +，Android 2.2 +，BlackBerry 6等）的浏览器中，使用“fixedtoolbar”插件的工具栏将固定在视口的顶部或底部，页面内容在两者之间自由滚动。在不支持固定定位的浏览器中，工具栏将保持位于页面顶部或底部的流程中。

要在页眉或页脚上启用此行为，请将data-position="fixed“属性添加到jQuery Mobile页眉或页脚元素。

固定标头标记示例：

<div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
</div>

固定页脚标记示例：

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>

工作演示here。

Answer 2

<div data-role="header" data-position="fixed" data-id="header1" data-tap-toggle="false" style="border-bottom:4px solid #f57122;">
    <h1>Header</h1>
</div>

根据我的经验，您还需要将data-tap-toggle设置为false，因为如果他们点击页面上的任何位置，您不希望标题消失。此外，您需要此data-id，如果您有多个页面，则需要每个页面上的标题具有相同的data-id，以便jquery mobile不会替换活动页面的当前标题。

编辑：如果您在实际设备上的页面转换过程中遇到闪烁，则必须将其添加到索引html中

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

jQuery：如何使页眉和页脚不滚动？

2 个答案: