jquery - 滚动后将元素定位在屏幕中间

Question

我的页面是屏幕高度的 2 倍（大小取决于页面上的其他项目）。无论滚动位置如何，我都想在屏幕中间显示一个绝对定位的 SPAN。

我在按钮单击时应用以下样式，但是如果我一直向下滚动，该元素会显示在页面的最顶部，因为它从整个页面顶部开始计算 50%。

.Centered {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 45%;
}

如何在单击按钮时根据滚动药水将元素定位在页面中间？

谢谢你。

Answer 1

你确定你不想要固定定位吗？

绝对定位将项目定位在页面的上下文中，因此它将随着页面上下滚动。固定定位将项目定位在视口的上下文中，因此它不会随页面移动。相反，无论您如何滚动，它都会保持在相同的位置。

.Centered
{
  width:100%;
  position:fixed;
  top:50%;
  left:45%;
}

此页面上的菜单是固定定位的一个很好的例子。

Answer 2

.Centered 
{
    position:absolute;   
    width:100%;
    top:50%;
    left:50%;
    margin-height: -200px;
    max-height: 400px;
}

这样，技巧就变成了为最大高度找到合适的值。

Answer 3

尝试使用jQuery Center 插件。