我有一个div,希望它在滚动后仍然居中于窗口。如何实现?
您可以使用固定宽度的定位方式将其置于中心,并通过负边距设置宽度和高度的一半来实现。因此,对于大小为200x200的带有id your_div
的div元素,您可以这样做:
#your_div {
width: 200px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
我本来自己在查找这个问题,但是最先出现的是这篇文章。经过进一步的研究,我找到了这个链接,我认为这是最好的跨浏览器解决方案:
基本上,为了使用jquery来解决IE6的问题,只需考虑$(window).scrollTop()和$(window).scrollLeft()。
希望这可以帮到你。
Steve
{
var width = $(window).width();
var heigth = $(window).height();
var myWindow = $('.my-window');
myWindow .show('fast');
myWindow .offset(
{
left: (width - myWindow .width()) / 2 + $(window).scrollLeft(),
top: (heigth - myWindow .height()) / 2 + $(window).scrollTop()
});
}
{
position: fixed;
}
如果您需要支持IE 6,则必须将div元素附加到body并将位置设置为“absolute”。将body元素的position属性设置为“relative”。并应用reko_t建议的其余样式。这样,当您滚动时,div应该保持在中心。
除此之外,我建议您考虑另一种情况,即当您想要将某个div定位在页面中心时。如果您的视口大小小于您要定位在中心的div,则当您滚动时,您将看到相同部分的div,直到您将窗口调整为大于div的大小。
为了解决这种情况,您应该选择JavaScript解决方案而不是纯CSS解决方案。您应该定义一个窗口调整大小的监听器。如果调整大小的窗口视口较小,则将div定位在视口的左上角并禁用onscroll监听器。如果调整大小的窗口视口大于div,则您的onscroll监听器应该应用reko_t建议的样式。