我正在尝试修复一个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();
});