始终将元素保持在屏幕上，并显示“position：sticky” [英] Keep element always on screen with "position: sticky"

问题描述

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

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

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

我试过的：

• position：sticky ;顶部：50％ - 但是这只能保持集中在容器的下半部分。 底部：50％ - 但是这只能保持上半部分的位置
  
• position：sticky;顶部：50％;底部：50％; - 看起来顶部覆盖底部，这就像我的首先尝试使用 top：50％ only


• 我尝试设置负值但它不起作用
  

以下是一个演示：

  .container {height：1200px; background-color：rgba（0，0，0，.7）;白颜色;显示：flex; justify-content：center; align-items：center;}。center-piece {background-color：green;位置：粘性; top：50％;}。center-piece2 {background-color：steelblue;位置：粘性; bottom：50％;}  

< div class =容器> < div class =center-piece> ＃1< / div> < div class =center-piece2> ＃2< / div>< / div>

无论如何要保持它完全居中，而始终在屏幕上，在容器的可见位置，无论顶部还是底部？

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

rawr将作为它背后图片的控件。

解决方案

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

  position：fixed; 
 top：50vh; 
  

？

  .container {height：1200px; background-color：rgba（0，0，0，.7）;白颜色;显示：flex; justify-content：center; align-items：center;}。center-piece {background-color：green;位置：固定;顶部：50vh;左：50vw; transform：translate（-50％，50％）;}   
 < div class =container> < div class =center-piece>＃1< / div>< / div>  

b $ b

I have a container with known height (height is sometimes longer then screen).

This container has a vertically and horizontally centered element (via flex).

I was hoping to keep this element always on the screen vertically centered in the block in the visible portion of the container.

What I tried:

• position:sticky; top:50% - however this only keeps it centered on the bottom half of container.
• position:sticky; bottom:50% - however this only keeps it centered on top half
• position:sticky; top: 50%; bottom:50%; - it seems top overrides bottom so this is just like my first try with top:50% only
• I tried setting negative values but it didn't work

Here is a demo:

.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>

Is there anyway to keep it perfectly centered, while "always on screen", in the visible porition of container, both top and bottom?

Here is a screencast of my application: https://www.youtube.com/watch?v=CwYaBgolNHU

The "rawr" will be the controls for the image behind it.

解决方案

I may have misunderstood your question, but can you use:

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>

这篇关于始终将元素保持在屏幕上，并显示“position：sticky”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！