我正在尝试修复一个div,使其始终保持在屏幕顶部,使用:
position: fixed;
top: 0px;
right: 0px;
然而,div位于居中的容器内。当我使用position:fixed时,它会相对于浏览器窗口修复div,例如它位于浏览器的右侧。相反,它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素,但是当您向下滚动页面时,元素会消失,并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点?
我创建了这个jQuery插件来解决我遇到的类似问题,我有一个居中的容器(表格数据),我希望在滚动列表时将标题固定在页面顶部,但我希望它锚定在表格数据上,这样它就可以放在我放置容器的任何位置(居中、左、右),并允许它在水平滚动时随页面左右移动。
下面是这个jQuery插件的链接,它可以解决这个问题:
https://github.com/bigspotteddog/ScrollToFixed
该插件的描述如下:
该插件用于将元素固定到页面顶部,如果元素垂直滚动到视图之外;然而,它确实允许元素随着水平滚动继续向左或向右移动。
给定选项marginTop,一旦垂直滚动到达目标位置,元素将停止垂直向上移动;但是,当页面向左或向右滚动时,元素仍将水平移动。一旦页面向下滚动到目标位置,元素将恢复到页面上的原始位置。
该插件已在Firefox 3/4、Google Chrome 10/11、Safari 5和Internet Explorer 8/9中进行了测试。
特定案例的用法:
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>
$(document).ready(function() {
$('#mydiv').scrollToFixed();
});
这很简单(根据下面的HTML)
技巧是不要在元素(div)上使用“position:fixed;”的top或left。如果未指定这些元素,则“fixed content”元素将显示为相对于封闭元素(具有“position:RELATIVE;”的div)INSTEAD OF相对于浏览器窗口!!!
<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
<div id="divCloser" style="position:relative; left: 852px;">
<div style="position:fixed; z-index:22;">
<a href="javascript:hideDiv('divTermsOfUse');">
<span style="font-size:18pt; font-weight:bold;">X</span>
</a>
</div>
</div>
<div> <!-- container for... -->
lots of Text To Be Scrolled vertically...
bhah! blah! blah!
</div>
</div>
上面的内容允许我在垂直滚动的div中的许多文本的顶部找到一个关闭的“X”按钮。“X”位于适当位置(不会随滚动文本移动,但当用户调整浏览器窗口的宽度时,它会随包围div容器向左或向右移动!因此,它垂直“固定”,但相对于包围元素水平定位!
在我开始工作之前,当我向下滚动文本内容时,“X”向上滚动并消失。
很抱歉没有提供我的javascript hideDiv()函数,但这将不必要地延长这篇文章的篇幅。我选择了尽量缩短。