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

Question

我有一个网站，我需要让它在那里，当你滚动到一个页面，手机棒的地方，在中间，手机内容交换，因为你滚动，直到你达到一个特定的点(如页脚)。我遇到的问题是把它保持在可滚动区域内，因为我唯一能找到的方法是用位置来覆盖它:绝对。但是，添加这一点意味着容器中的“粘性”不再存在。弹出来了。

下面是一个示例(您可以在下面运行一个演示)：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>

​

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更改为绝对位置。