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

Question

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

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

截图：

页面加载

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

绿色边框是黄色方块的（phone现实生活中的图像）container/parent。注意结果如何。

如果可能的话，我真的宁愿不使用 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>

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>

Answer 2

取决于你希望它如何表现：您可以确保页脚像这样重叠：

footer {
  position: relative;
  z-index: 20; /* above z-index of sticky element*/
}

或者您可以添加一点 javascript 来检测滚动位置，当它距底部 x 量时，即页脚高度，将 css 更改为绝对位置。

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

Sticky element on top of other elements without leaving container

html

css

sticky