0

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

我想要实现的只是使列表视图可滚动，而不是其他任何东西，以便页眉和页脚始终可见。

这在 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>
4

2 回答 2

2

我认为您要的是固定工具栏：

在支持 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>

工作演示在这里。

于 2013-07-09T15:18:48.250 回答
1 
<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，因为如果他们单击页面上的任何位置，您不希望标题消失。您还需要此数据 ID，如果您有多个页面，则每个页面上的标题都需要具有相同的数据 ID，因此 jquery 移动设备不会替换活动页面的当前标题。

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

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
于 2013-07-10T05:11:05.710 回答