Последний липкий элемент покрывает другие липкие div, как я могу это исправить? - PullRequest
Новая
       30

Последний липкий элемент покрывает другие липкие div, как я могу это исправить?

0 голосов
/ 31 марта 2020

Я пытаюсь исправить поведение последнего (. Пятого) элемента. Я хочу, чтобы он остановился на вершине 400px, а затем прокрутить до конца страницы. Я не хочу, чтобы это покрывало другие элементы. Он мой код: 

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

.container {
  height: 100%;
}

.h1 {
  padding: 40px;
  width: 50%;
}

.mainInfoConatiner {
  position: fixed;
  width: 45%;
  height: 100vh;
  width: 50%;
  background-color: #1f221e;
  color: white;
  text-transform: uppercase;
}

.cardContainer {
  position: relative;
  width: 55%;
  left: 45%;
}

.card {
  cursor: pointer;
  position: sticky;
  background-color: #0c62f3;
  height: 85vh;
  margin-left: auto;
  color: white;
  padding: 64px;
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

.first {
  top: 0;
}

.second {
  background-color: white;
  top: 100px;
  color: rgba(0, 0, 0, 0.9);
}

.third {
  background-color: #0c62f3;
  top: 200px;
}

.fourth {
  background-color: white;
  top: 300px;
  color: rgba(0, 0, 0, 0.9);
}

.fifth {
  background-color: #0c62f3;
  top: 400px;
}
<div class="container">
  <div class="mainInfoConatiner">
    <h1 class="h1">Sales Deck Info</h1>
  </div>
  <div class="cardContainer">
    <div class="card first">
      <p class="subheader">
        Meeting • 16-01-2020 • Posted 3 mins ago • SalesMan
      </p>
      <h1>
        Meeting in our office about bus
      </h1>
      <p>
        17 Mar 2020, 10:30
      </p>
      <p class="text">
        Hi Ben, it’s Serenity from Hello. We would love to ask you a few questions if you’re interested in partnership with us.
      </p>
    </div>
    <div class="card second">
      <p class="subheader">
        Meeting • 16-01-2020 • Posted 3 mins ago • SalesMan
      </p>
      <h1>
        Configure your bus
      </h1>

      <p class="text">
        Hi Ben, it’s Serenity from Hello. We would love to ask you a few questions if you’re interested in partnership with us.
      </p>
    </div>
    <div class="card third">
      <p class="subheader">
        Meeting • 16-01-2020 • Posted 3 mins ago • SalesMan
      </p>
      <h1>
        Meeting in our office about bus
      </h1>
      <p>
        17 Mar 2020, 10:30
      </p>
      <p class="text">
        Hi Ben, it’s Serenity from Hello. We would love to ask you a few questions if you’re interested in partnership with us.
      </p>
    </div>
    <div id="previousCard" class="card fourth">
      <p class="subheader">
        Meeting • 16-01-2020 • Posted 3 mins ago • SalesMan
      </p>
      <h1>
        Meeting in our office about bus
      </h1>
      <p>
        17 Mar 2020, 10:30
      </p>
      <p class="text">
        Hi Ben, it’s Serenity from Hello. We would love to ask you a few questions if you’re interested in partnership with us.
      </p>
    </div>
    <div id="lastCard" class="card fifth">
      <p class="subheader">
        Meeting • 16-01-2020 • Posted 3 mins ago • SalesMan
      </p>
      <h1>
        Meeting in our office about bus
      </h1>
      <p>
        17 Mar 2020, 10:30
      </p>
      <p class="text">
        Hi Ben, it’s Serenity from Hello. We would love to ask you a few questions if you’re interested in partnership with us.
      </p>
    </div>
  </div>
</div>

Я пробовал разные способы и до сих пор не нашел решения. Я подумал, что, может быть, мне не стоит использовать липкие и сделать это с JS. Любые советы очень ценятся.

...