html - 在其他元素之上的粘性元素而不离开容器

Question

我有一个网站，我需要在您向下滚动页面时将手机固定在中心位置，并且当您滚动到某个点（例如页脚）时手机内容会交换。我遇到的问题是将它保持在可滚动区域内，因为我可以弄清楚如何覆盖它的唯一方法是使用 position:absolute。然而，添加它意味着它在容器内不再“粘”。它弹出来。

这是一个示例（您可以在下面运行演示）：https ://codepen.io/oscargodson/pen/OJXJGRL

截图：

页面加载

向下滚动（注意它仍然居中并覆盖在其他所有内容之上）

绿色边框是黄色方块（现实生活中的手机图像）容器/父级。注意它是如何出来的。

如果可能的话，我真的宁愿不使用 JS，但如果这是唯一可以的方法。

.panel-wrapper {
  border: 5px solid chartreuse;
  position: relative;
}

.panel {
  height: 100vh;
}

.panel-1 { background: aqua; }
.panel-2 { background: blue; }
.panel-3 { background: darkblue; }

.sticky-wrapper {
  width: 100%;
  position: sticky;
  background: transparent;
  top: calc(100vh/2 - 613px/2);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.sticky-element {
  width: 315px;
  height: 613px;
  background: yellow;
  position: absolute;
  top: 0;
}

footer {
  font-size: 100px;
  font-weight bold;
  text-align: center;
  padding: 250px 0;
  background: red;
}

<div class="outer-wrapper">
  <div class="panel-wrapper">
    <div class="sticky-wrapper">
      <div class="sticky-element"></div>
    </div>
    <div class="panel panel-1"></div>
    <div class="panel panel-2"></div>
    <div class="panel panel-3"></div>
  </div>
  <footer>
     Should not overlap here!
  </footer>
</div>

标签： htmlcsssticky

Answer 1

取出position:absolute并制作粘性容器float:left

.panel-wrapper {
  border: 5px solid chartreuse;
  position: relative;
}

.panel {
  height: 100vh;
}

.panel-1 { background: aqua; }
.panel-2 { background: blue; }
.panel-3 { background: darkblue; }

.sticky-wrapper {
  width: 100%;
  position: sticky;
  background: transparent;
  top: calc(100vh/2 - 613px/2);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  float:left; /* added */
}

.sticky-element {
  width: 315px;
  height: 613px;
  background: yellow;
  top: 0;
}

footer {
  font-size: 100px;
  font-weight bold;
  text-align: center;
  padding: 250px 0;
  background: red;
}

<div class="outer-wrapper">
  <div class="panel-wrapper">
    <div class="sticky-wrapper">
      <div class="sticky-element"></div>
    </div>
    <div class="panel panel-1"></div>
    <div class="panel panel-2"></div>
    <div class="panel panel-3"></div>
  </div>
  <footer>
     Should not overlap here!
  </footer>
</div>

如果您有内容，请考虑shape-outisde技巧，以便您也可以重叠文本：

.panel-wrapper {
  border: 5px solid chartreuse;
  position: relative;
}

.panel {
  height: 100vh;
  font-size:10vh;
  color:#fff;
}

.panel-1 { background: aqua; }
.panel-2 { background: blue; }
.panel-3 { background: darkblue; }

.sticky-wrapper {
  width: 100%;
  position: sticky;
  background: transparent;
  top: calc(100vh/2 - 613px/2);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  float:left; /* added */
  shape-outside:linear-gradient(transparent,transparent);
}

.sticky-element {
  width: 315px;
  height: 613px;
  background: yellow;
  top: 0;
}

footer {
  font-size: 100px;
  font-weight bold;
  text-align: center;
  padding: 250px 0;
  background: red;
}

<div class="outer-wrapper">
  <div class="panel-wrapper">
    <div class="sticky-wrapper">
      <div class="sticky-element"></div>
    </div>
    <div class="panel panel-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in dignissim magna. Nulla magna lorem, mattis et ultricies euismod, posuere condimentum nulla. Pellentesque mollis, mauris quis elementum porttitor, arcu mauris aliquet metus, sed maximus sapien diam varius est. Aliquam erat volutpat.</div>
    <div class="panel panel-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in dignissim magna. Nulla magna lorem, mattis et ultricies euismod, posuere condimentum nulla. Pellentesque mollis, mauris quis elementum porttitor, arcu mauris aliquet metus, sed maximus sapien diam varius est. Aliquam erat volutpat.</div>
    <div class="panel panel-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in dignissim magna. Nulla magna lorem, mattis et ultricies euismod, posuere condimentum nulla. Pellentesque mollis, mauris quis elementum porttitor, arcu mauris aliquet metus, sed maximus sapien diam varius est. Aliquam erat volutpat.</div>
  </div>
  <footer>
     Should not overlap here!
  </footer>
</div>