Facebook页面

Question

我想知道如何制作这些facebook的占卜，而其中一个永远滚动另一个只到最后。但是，这两种情况都出现了，第一次在这里输入图像描述在开始时就被修复了。

Answer 1

使用CSS的position: sticky，您可以实现这一效果。

​

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>

​