A sticky div displayer issue from css

Issue

I have a small website for note-taking purposes, but I encountered an issue. If each container has a lot of content, users can't see the second half of the content in that container. For example, in the first container, they can't see the content 'ZZZ' before scrolling to the next container. Do you have any good solutions?

I tried increasing the height of each container but it still around

body {
  background-color: #808080;
}

.sticky {
  position: sticky;
  height: 300vh;
  padding: 5px;
  background-color: #fff;
}

.div-content {
  height: 100%;
}

.first-div {
  top: 0;
  border: solid 2px black;
}

.second-div {
  top: 0;
  border: solid 2px red;
}

.third-div {
  top: 0;
  border: solid 2px pink;
}

.fourth-div {
  top: 0;
  border: solid 2px purple;
}

.fifth-div {
  top: 0;
  border: solid 2px green;
}

.code {
  color: blue;
  font-size: 20px;
}

.note {
  color: purple;
  font-size: 20px;
}

h1 {
  white-space: pre-line;
}

<div class="sticky first-div">
  Container 1: First Div
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>ZZZ</h1>
</div>

<div class="sticky second-div">
  Container 2: Second Div
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
</div>

<div class="sticky third-div">
  Container 3: Third Div
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
</div>

<div class="sticky fourth-div">
  Container 4: fourth Div
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
</div>

<div class="sticky fifth-div">
  Container 5: fifth Div
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
</div>

Solution

Your issue is that none of the cards are actually scrolling, because you've set the div to be sticky it reaches the top of the page and then everything is moving behind it.

The way to prevent this would be to remove the sticky from the divs, and instead sticky the headings.

Here is a minimal recreation

<div class="sticky first-div">
    <h2 class="sticky-heading">Container 1: First Div</h2>
    <p>XXXX</p>
</div>

.sticky {
  height: 300vh;
  padding: 5px;
  background-color: #fff;
}

.sticky-heading {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #fff;
}

Here is a codepen showing the full implementation.

Answered By - ddaannnnyy