I wanted to know how to make these facebook divas, while one eternally scrolls the other only to the end of itself. However, both roll up, the firstenter image description here fixing at its start.

CodePudding user response：

Using CSS's position: sticky you can achieve this effect.

main {
  height: 2000px;
  display: flex;
  gap: 10px;
}

aside {
  flex: none;
  width: 170px;
  background: tomato;
  position: sticky;
  top: 10px;
  height: 200px;
}
article {
  flex: 1;
  background: linear-gradient(180deg, rgba(163,122,255,1) 0%, rgba(179,255,0,1) 100%);
  height: 100%;
}

<header>
 <h1>Header</h1>
</header>
<main>
  <aside>
    I'm sticky!
  </aside>
  <article>Main content</article>
</main>