0

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

任何建议都会有所帮助。

最好的祝福。

4

2 回答 2

1

看看下面的代码是否有帮助（注意边距调整如何使用负值，即被定位的 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>
于 2012-12-26T10:37:32.317 回答
1

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

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

The hard part will be implementing the javascript to compute the element positions and then fire the event after the browser finishes scrolling.

Hopefully some other folks can chime in if I've got the right direction.

Vote me up, bro. :)

于 2012-12-26T11:32:41.380 回答