Javascript 如何重新定位固定收割台&；页脚？_Javascript_Ios_Css_Cordova_Jquery Mobile

Javascript 如何重新定位固定收割台&；页脚？

javascript ios css cordova jquery-mobile

Javascript 如何重新定位固定收割台&；页脚？,javascript,ios,css,cordova,jquery-mobile,Javascript,Ios,Css,Cordova,Jquery Mobile,我在使用固定页眉和页脚时遇到一些问题，但有人建议我使用位置：绝对而不是固定并在使用JavaScript代码滚动时重新定位页眉和页脚，有人知道怎么做吗？或者他面临的这个问题任何建议都会有帮助致以最良好的祝愿查看下面的代码是否有帮助（请注意保证金调整如何使用大小为所定位div一半的负值）：排列身体{ 边际：0px；填充：0px； } #文本中心{ 文本对齐：居中；宽度：200px；位置：绝对位置；左：50%；最高：50%；左边距：-100px；利润上限：-20px；

我在使用固定页眉和页脚时遇到一些问题，但有人建议我使用位置：绝对而不是固定并在使用JavaScript代码滚动时重新定位页眉和页脚，有人知道怎么做吗？或者他面临的这个问题

任何建议都会有帮助

致以最良好的祝愿

查看下面的代码是否有帮助（请注意保证金调整如何使用大小为所定位div一半的负值）：


排列
身体{
边际：0px；
填充：0px；
}
#文本中心{
文本对齐：居中；
宽度：200px；
位置：绝对位置；
左：50%；
最高：50%；
左边距：-100px；
利润上限：-20px；
}
#文本底部{
文本对齐：居中；
宽度：200px；
位置：绝对位置；
左：50%；
底部：1%；
左边距：-100px；
}
文本1
文本2

艾哈迈德，我刚从我们讨论的另一条线索过来。你的问题不够清楚，其他人回答不了。您的问题应该包括这样一个事实，即您需要触发javascript函数以在特定事件上重新定位

一种方法是：将元素更改为绝对位置，而不是固定位置。不要使用固定的。然后，使JavaScript函数在每次浏览器窗口滚动或完成滚动时都启动定位元素。通过这种方式，在用户完成滚动后，元素将始终移动到视图中。它们会突然出现在人们的视野中，看起来很难看。为了使它们平滑地移动到视图中，您必须通过使用css3转换或使用javascript逐步插入位置来进一步扩展它。在iOS5和iOS6上，您应该能够很好地使用css3转换。它们将非常容易实施。CSS3转换使javascript控制的动画变得轻而易举

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

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

投票支持我，兄弟。：）

请考虑一下你是否提供了足够的信息。当你说“一些”问题时，那是什么意思？position:absolute和position:fixed都可以定位元素，唯一的区别是绝对定位使用文档作为坐标空间，而在fixed position中，视口是坐标空间。把你的问题解释一下more@Mutahhir当前位置我说了“一些”问题，因为我不想再谈论它，如果你想帮助我，那就太好了，否则请不要错过我的问题。我们是专业的开发人员。我不是想搞乱你的问题，我只是想指出，如果你提供更多的信息，你可能会得到解决问题的答案。问一个长问题不是问题，只要它能正确地解释你的问题。@Mutahir:原谅我，我弄错了，谢谢你的解释，但是你知道答案吗。如果我真的知道你想问什么，我很肯定我能帮你。如果下面的答案解决了你的问题，那就太好了。如果没有，请发布更多关于“修复”页眉和页脚所面临问题的信息。在回答中，他建议您使用position:absolute，然后用javascript编写与position:fixed相同的代码。如果您试图制作一个在滚动后在视图中显示动画的小部件。这是另一个故事，因此您需要position:absolute，在“scroll”事件中使用一些javascript。您的代码是可以的，但是如果我将这个div添加到您的代码中，页面将在滚动文本2之后滚动，而不是在底部，因此我们需要javascript代码重新定位它文本1文本2`谢谢@Jim的解释

<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>