Dynamically position div below a fixed position div

Question

I'm trying to position the second pink div to be dynamically vertically positioned based on the height of the top first div (hero) to then scrolls above it.

Currently it has the following code:

body {
  margin: 0px;
  font-family: helvetica;
}

h1 {
  font-size: 4rem;
  text-transform: uppercase;
  color: yellow;
}

.hero {
  position: fixed;
  z-index: 0;
  background: grey;
  padding: 40px;
  top: 0;
}
.block {
  background: pink;
  height: 90vh;
  position: relative;
  z-index: 0;
  padding: 40px;
  margin-top: 90vh;
}
h2 {
  font-size: 3rem;
}

<div class="hero">
  <h1>Intro block to be fixed position and under all other content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non orci eu odio suscipit sagittis. Sed vitae pretium sapien, vitae facilisis tellus. Praesent gravida interdum quam, id accumsan ex congue quis.
</h1>
</div>

<div class="block">
    <h2>Second block to be position below the hero block and overlay on scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non orci eu odio suscipit sagittis. Sed vitae pretium sapien, vitae facilisis tellus. Praesent gravida interdum quam, id accumsan ex congue quis.
</h2>
</div>

Is there a smart way to do this with CSS

Answer 1

sticky can help here:

body {
  margin: 0px;
  font-family: helvetica;
}

h1 {
  font-size: 1rem;
  text-transform: uppercase;
  color: yellow;
}

.hero {
  position: sticky;
  background: grey;
  padding: 40px;
  top: 0;
}
.block {
  background: pink;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  padding: 40px;
}
h2 {
  font-size: 3rem;
}

<div class="hero">
  <h1>Intro block to be fixed position and under all other content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non orci eu odio suscipit sagittis. Sed vitae pretium sapien, vitae facilisis tellus. Praesent gravida interdum quam, id accumsan ex congue quis.
</h1>
</div>

<div class="block">
    <h2>Second block to be position below the hero block and overlay on scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non orci eu odio suscipit sagittis. Sed vitae pretium sapien, vitae facilisis tellus. Praesent gravida interdum quam, id accumsan ex congue quis.
</h2>
</div>