我如何重新定位固定的页眉和页脚？答案

【问题标题】：how do i re-position fixed Header & Footer?我如何重新定位固定的页眉和页脚？
【发布时间】：2012-12-26 10:32:34
【问题描述】：

我在使用固定页眉和页脚时遇到了一些问题，但有些人建议我使用 Position: Absolute 而不是 Fixed 并在使用 JavaScript 代码滚动时重新定位页眉和页脚，有谁知道如何做到这一点？或者这个问题摆在他面前。

任何建议都会有所帮助。

最好的问候。

【问题讨论】：

请考虑一下您是否提供了足够的信息。当你说“一些”问题时，这是什么意思？ position:absolute 和 position:fixed 都可以定位元素，唯一的区别是绝对定位使用文档作为它的坐标空间，而在固定定位中，视口是坐标空间。多解释一下你的问题
@Mutahhir ：我说'一些'问题是因为我不想讨论它，如果你想帮助那将是非常好的，请不要错过我的问题。我们是专业的开发人员。
我并不是要弄乱您的问题，只是指出，如果您提供更多信息，您可能会得到解决问题的答案。只要能正确解释您的问题，问一个长问题就不是问题。
@Mutahhir : 原谅我，我弄错了，谢谢你的解释，但是你知道答案吗。
如果我真的知道你想问什么，我很确定我可以帮助你。如果下面的答案解决了您的问题，那就太好了。如果没有，请发布更多关于“固定”页眉和页脚所面临的问题。在答案中，他建议您使用 position: absolute ，然后在 JavaScript 中编写与 position: fixed 相同的代码。如果您试图让其中一个小部件在您滚动后动画到视图中。那是另一个故事，为此您将需要 position: absolute 在“滚动”事件中使用一些 javascript。

标签： javascript ios css cordova jquery-mobile

【解决方案1】：

艾哈迈德，我刚从我们讨论的另一个话题来到这里。你的问题不够清楚，其他人无法回答。您的问题应包括您需要触发 javascript 函数以重新定位特定事件的事实。

您可以这样做的一种方法是：将元素更改为绝对位置而不是固定位置。根本不要使用固定的。然后在每次浏览器窗口滚动或完成滚动时触发定位元素的 javacript 函数。通过这样做，元素将始终在用户完成滚动后移动到视图中。它们实际上会突然出现，看起来很难看。为了使它们顺利进入视野，您必须通过使用 css3 转换或使用 javascript 逐渐插入位置来进一步扩展它。在 iOS5 和 iOS6 上，你应该能够很好地使用 css3 过渡。它们很容易实现。 CSS3 过渡让 javascript 控制的动画变得轻而易举。

困难的部分是实现 javascript 来计算元素位置，然后在浏览器完成滚动后触发事件。

如果我有正确的方向，希望其他人能加入进来。

投票给我，兄弟。 :)

【讨论】：

感谢@Jim 的解释

【解决方案2】：

看看下面的代码是否有帮助（注意边距调整如何使用负值，即被定位的 div 大小的一半）：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>align</title>
<style type="text/css">
body {
    margin: 0px;
    padding: 0px;
}
#text_center {
    text-align: center;
    width: 200px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-20px;
}
#text_bottom {
    text-align: center;
    width: 200px;
    position:absolute;
    left:50%;
    bottom:1%;
    margin-left:-100px;
}
</style>
</head>
<body>
    <div id="text_center">Text 1</div>
    <div id="text_bottom">Text 2</div>
</body>
</html>

【讨论】：

你的代码没问题，但是如果我把这个 div 添加到你的代码中，页面会滚动，滚动后 Text 2 不在底部，所以我们需要 javascript 代码重新定位它。 `
文本 1

文本 2
`
跨度>