如何在Flexbox中推送带有粘性元素的容器？

Question

我正在尝试重新创建在该网站上找到的效果，特别是在该部分中； “我们如何增加收入” - https://www.loungelizard.com/

我可以看到左列是粘性的，右列滚动内容，但我想知道一旦其上方的右侧可滚动容器到达末尾，下一个容器如何开始滚动？

谢谢斯科特。

我可以让左栏粘住，但一旦容器到达末尾，就无法恢复整个页面滚动。

Answer 1

如果我们能够看到您为实现编写的代码，那就太好了。 不过，我还包含了我自己的简约实现，以重新创建您正在寻找的效果。不太漂亮，但您可以将其用作基本模板。

HTML

<section class="section-a"></section>
<section class="section-b">
  <div class="left">
    <p>Some text content</p>
    <p>Some text content</p>
    <p>Some text content</p>
    <p>Some text content</p>
    <p>Some text content</p>
    <p>Some text content</p>
  </div>
  <div class="right">
    <p>Some text content</p>
    <p>Some text content</p>
    <p>Some text content</p>
    <p>Some text content</p>
    <p>Some text content</p>
    <p>Some text content</p>
  </div>
</section>
<section class="section-c"></section>

CSS

body {
  margin: 0;
}

section {
  
  width: 100vw;
  border: 2px solid;
}

.section-a {
  height: 100vh;
  background-color: red;
}

.section-b {
  height: 150vh;
  display: flex;
  background-color: green;
}

.section-c {
  height: 100vh;
  background-color: blue;
}

.left {
  height: 100vh;
  width: 30%;
  background: purple;
  position: sticky;
  top: 0;
}

.right {
  height: 100%;
  width: 70%;
}

https://codepen.io/Jun-Wen-Soh/pen/KKEMNvJ