html - 为什么 CSS Sticky 属性在传递时会清除其他元素

Question

我想做什么:我试图让它在用户滚动时在页面上形成一个列表。一切都按预期运行，直到最后一个元素“删除”所有其他元素。

* {
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu';
  box-sizing: border-box;
}

body {
  background-color: #15192c;
  color: #fff;
}

.content {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.list {
  margin: 10em 5em;
  font-size: 200%;
}

aside {
  flex: 1;
  font-size: 500%;
  position: sticky;
  top: 25%;
  height: 100%;
}

.aside h1 {
  font-weight: bolder;
  font-size: 500%;
}

article {
  flex: 2;
  height: 120%;
}

#developer {
  position: sticky;
  top: 4em;
}

#designer {
  position: sticky;
  top: 6em;
}

#student {
  position: sticky;
  top: 8em;
}

#learner {
  position: sticky;
  top: 10em;
}

#entrepreneur {
  position: sticky;
  top: 12em;
}

#programmer {
  position: sticky;
  top: 14em;
}

#champion {
  position: sticky;
  top: 16em;
}

#risk-taker {
  position: sticky;
  top: 18em;
}

#mistake-maker {
  position: sticky;
  top: 20em;
}

<div class="content">
  <aside>
    <h1>Hello.</h1>
    <p>I'm a</p>
  </aside>
  <article>
    <section class="list" id="developer">
      <h2>Developer</h2>
    </section>
    <section class="list" id="designer">
      <h2>Designer</h2>
    </section>
    <section class="list" id="student">
      <h2>Student</h2>
    </section>
    <section class="list" id="learner">
      <h2>Learner</h2>
    </section>
    <section class="list" id="entrepreneur">
      <h2>Entrepreneur</h2>
    </section>
    <section class="list" id="programmer">
      <h2>Programmer</h2>
    </section>
    <section class="list" id="champion">
      <h2>Champion</h2>
    </section>
    <section class="list" id="risk-taker">
      <h2>Risk-Taker</h2>
    </section>
    <section class="list" id="mistake-maker">
      <h2>Mistake-Maker</h2>
    </section>
  </article>
</div>

在 CodePen 上:https://codepen.io/jason43/pen/oNvJWYQ

Answer 1

更改位置值以固定；那就是

position: fixed;
top: 0;

这应该可行