Question

我有一个像Twitter流一样的更新流。

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
</ul>
<div id="pop-up"></div>

和CSS

#pop-up {
    position: absolute;
    top: 125px;
    left: center;
    margin-left: -200px;
    width: 960px;
    min-height: 400px;
    z-index: 100;
}

当我点击列表项时，div#pop-up会弹出一个叠加层，内容将在其中动态生成。

如何定位弹出窗口，使其弹出屏幕内的“固定”位置？

我不能只写position: fixed，如果内容很长，那么我就可以向下滚动了。我不能写position: absolute因为列表项很长，如果我向下滚动并点击列表的最后一项，弹出窗口会从顶部显示150px并且我要向上滚动？

Answer 1

列表项很长，如果我向下滚动并单击列表的最后一项，弹出窗口显示150px从顶部，我向上滚动？

要避免此问题，您必须始终坚持使用position:fixed div。要使其可滚动，只需添加一个快速的overflow: scroll :)。

Answer 2

$('#pop-up').hover(function(){
$(this).css('position','absolute');
},function(){
$(this).css('position','fixed');
});

这样，一旦你进入并且正在运行页面，当你在外面时，它是可滚动的

Answer 3

使用$(window).scrollTop()获取滚动像素数并向其添加150 - 这样可以获得绝对定位弹出窗口的top值。 Fiddle

如何定位div，使其始终显示在可见显示顶部100px

3 个答案: