如何使页眉和页脚始终固定？

Posted 2023-03-15

【中文标题】如何使页眉和页脚始终固定？

【英文标题】：How to make Header & Footer fixed all time?

【发布时间】：2012-12-26 08:49:28

【问题描述】：

我想在 ios 下的 Phone Gap 应用程序中始终固定页眉和页脚 我使用 jQuery Mobile，但是当打开键盘或选择菜单（任何本机）时，页眉和页脚也变得不固定，我也禁用了切换， 此外，当打开原生事物（键盘或选择）时，simpledialog2 的位置不再居中。

这是页眉和页脚的 html 代码

<div id="PageHeader" data-role="header" data-theme="f" data-position="fixed"></div>
<div id="PageFooter" data-role="footer" data-theme="f" data-position="fixed"></div>

此代码 JS 用于禁用在文档中切换

$("[data-role=header]").fixedtoolbar( tapToggle: false );
$("[data-role=footer]").fixedtoolbar( tapToggle: false );

如果有人遇到此问题并试图解决它，请告诉我方法。

最好的问候。

【问题讨论】：

@peterm : 我已经用标记更新了帖子。

【参考方案1】：

如果您使用 position: fixed，您可能会发现有些事情是您无法克服的。在较早的手机时代， position: fixed 甚至不是一个选项，因为他们担心这些固定元素会覆盖小屏幕上的其他 UI 元素并使内容无法访问。当然，这是一个愚蠢的想法，每个人都抱怨缺乏位置：固定。直到最近几年，手机和其他移动设备才开始支持定位：固定。 iOS 实际上拥有最好的支持，但直到 iOS 5 才出现。

如果出现您所描述的特殊情况而无法解决，我不会感到惊讶。

【讨论】：

解决方法：如果您使用的是 position: fixed，则临时更改 position: absolute 的元素并使用 javascript 重新定位它们。尴尬的。除非你真的必须这样做，否则我不会推荐它。

你认为如何通过JS重新定位，

我写 javascript 的频率不高，无法告诉你我是多么的想不通。如果您想要简单易写的代码，jQuery 是最简单的方法。 $(#div-to-position).css("位置：绝对；顶部：322；左侧：473");将 #div-to-position 替换为您要定位的 div 的 id，并将 322 和 473 替换为您要应用的位置的值。如果你想这样做，你需要做更多关于如何触发 jQuery 事件的功课。确保您能够在需要时触发它，因为它可能需要一些愚蠢的解决方法。

顺便说一句，如果您接受我给出的答案，请确保您点击接受答案复选标记。使用 *** 时这样做很重要。如果您不接受答案，人们就不想回答。它是声誉所必需的。

还有一件事，如果你想问一个关于用 javascript 重新定位的问题，请继续并开始一个新的问题，因为它与你原来的问题完全不同。你可能会得到一些其他的意见。