我如何重新定位固定的页眉和页脚？
Posted
技术标签:
【中文标题】我如何重新定位固定的页眉和页脚？【英文标题】：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。 【参考方案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` 跨度>以上是关于我如何重新定位固定的页眉和页脚？的主要内容，如果未能解决你的问题，请参考以下文章