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

Question

我的页面是屏幕高度的 2 倍(大小因页面上的其他元素而异)。无论滚动位置如何，我都想在屏幕中间显示绝对定位的 SPAN。

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

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

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

谢谢。

Answer 1

你确定你不想fixed positioning ？

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

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

菜单on this page是固定定位的一个很好的例子。