Question

我正试图重新研究这一网站,特别是这一节中的效果:“我们如何支配收入”——。

I can see that the left column is sticky, and the right column scrolls the content, but I m wondering how the next container down starts scrolling once the right hand scrollable container above it has reached it s end?

感谢斯科特。

我可以把左栏带上 stick锁,但是,一旦集装箱到达尾声,总页数可以恢复。

Answer 1

Would be great if we could see what code you have written for your implementation. However, I have also included my own minimalistic implementation to recreate the effect you are looking for. Not pretty, but you can use it as a base template.

传真

<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

友情链接