Почему свойство CSS Sticky стирает другие элементы по мере его прохождения - PullRequest
Новая
       8

Почему свойство CSS Sticky стирает другие элементы по мере его прохождения

1 голос
/ 22 сентября 2019

Что я пытаюсь сделать: Я пытаюсь сделать так, чтобы список формировался на странице, пока пользователь прокручивает.Все функционирует, как и ожидалось, вплоть до последнего элемента, который «уничтожает» все остальные элементы. 

* {
  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

1 Ответ

0 голосов
/ 22 сентября 2019

изменить значения положения, чтобы исправить;то есть 

position: fixed;
top: 0;

это должно работать

...