使用“位置：粘性”将元素始终显示在屏幕上

Posted 2023-03-05

【中文标题】使用“位置：粘性”将元素始终显示在屏幕上

【英文标题】：Keep element always on screen with "position: sticky"

【发布时间】：2016-12-13 05:47:26

【问题描述】：

我有一个已知高度的容器（高度有时比屏幕长）。

这个容器有一个垂直和水平居中的元素（通过flex）。

我希望让这个元素始终保持在屏幕上，垂直居中在容器可见部分的块中。

我尝试了什么：

position:sticky; top:50% - 但是这只让它保持在容器的下半部分的中心。 position:sticky; bottom:50% - 但是这只让它保持在上半部分的中心 position:sticky; top: 50%; bottom:50%; - 似乎top 覆盖bottom 所以这就像我第一次尝试top:50% 一样 我尝试设置负值，但没有成功

这是一个演示：

.container 
  height: 1200px;
  background-color: rgba(0, 0, 0, .7);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

.center-piece 
  background-color: green;
  position: sticky;
  top: 50%;

.center-piece2 
  background-color: steelblue;
  position: sticky;
  bottom: 50%;

<div class="container">
  <div class="center-piece">
    #1
  </div>
  <div class="center-piece2">
    #2
  </div>
</div>

有没有办法让它完全居中，同时“始终在屏幕上”，在容器的可见部分，包括顶部和底部？

这是我的应用程序的截屏：https://www.youtube.com/watch?v=CwYaBgolNHU

“rawr”将是其背后图像的控件。

【问题讨论】：

position: sticky 仅适用于 Firefox（和带前缀的 Safari）：caniuse.com/#search=sticky

谢谢@Michael_B - 没关系，我只针对 Firefox 用户。

【参考方案1】：

注意：兼容性因浏览器而异..

根据caniuse.com，position: sticky在当前主流浏览器（非IE）上都支持。

jsFiddle

.container 
  height: 1200px;
  background-color: rgba(0, 0, 0, .7);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

.center-piece 
  background-color: green;
  position: sticky;
  top: 10px;                         /* 1 */
  bottom: 50%;
  left: 50%;
  transform: translate(-50%,50%);    /* 2 */

.center-piece2 
  background-color: steelblue;
  position: sticky;
  bottom: 10px;                      /* 3 */
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

<div class="container">
  <div class="center-piece">#1</div>
  <div class="center-piece2">#2</div>
</div>

注意事项：

当元素到达视口的top: 10px 时，position: sticky 启动 How centering works with CSS positioning and transform properties 当元素到达视口的bottom: 10px 时，position: sticky 启动

【讨论】：

非常感谢@Michael_B 我现在就测试一下！

它没有用 :( 非常感谢您为我提供解决方案的努力我已经为此苦苦挣扎了几天 - 这是一个截屏视频，显示它无法使用您的解决方案- youtube.com/watch?v=EJAiYyjJVUE

它适用于 Firefox 的 sn-p 和 fiddle 演示。您的截屏视频与此答案中的行为不符。发生冲突或发生其他事情。

感谢您如此快速的回复，我现在正在玩弄它，并会及时通知您它的进展情况。 :)

【参考方案2】：

我可能误解了你的问题，但你可以使用：

position: fixed;
top: 50vh;

?

.container 
  height: 1200px;
  background-color: rgba(0, 0, 0, .7);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

.center-piece 
  background-color: green;
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,50%);

<div class="container">
  <div class="center-piece">#1</div>
</div>

【讨论】：

感谢 Rounin 的帮助！它不起作用:(请看这个使用你的方法的新截屏视频 - youtube.com/watch?v=84j2gaQ26yw