Need assistance finetuning HTML, CSS, javascript - sticky header issue

See more:

Javascript

CSS

HTML

I'd like some help figuring out some things. I am very new to coding and I am figuring things out as I go through forums and tutorials online. I have attached my code below and I'd like some assistance finetuning a detail that I can't seem to figure out:
I want somehow the name and occupation to say visible as I scroll through the images and then [name, occupation, and images] disappear before the next name, occupation and image are revealed, not sure how to do this. I have used "sticky" with "portable digital format" and "but I am not an artist" successfully. I have also added it to .name .occupation in CSS but it doesn't seem to be working properly. how do I make sure they stick unless all the images are scrolled through?

I'd appreciate any help. I apologize if my code is unnecessarily long, but I have stitched it all together using so many different sources and I edited it a lot so now I am not sure what needs to be there and what doesn't but everything I need are there so I am not going to remove anything. I just request you please explain it like you would to a kid lol because I truly am lost and sleep-deprived at this point. Let me know if I need to clarify anything.
Thanks in advance.

<h1>Portable<br>Digital<br>Format</h1>


<p class="content">Portable Digital Format is a curated virtual space founded by Ahmad Saleh to showcase creative talent within the SWANA region. This platform will serve as an easy-to-consume, scroll-to-explore, portable exhibition that can be accessed anytime, anywhere.</p>
<div>   
    <img style="vertical-align:middle" src="instagram.png">
    <a href="https://www.instagram.com/portabledigitalformat">Follow us on Instagram</a>
</div>
<p class="content">Our first exhibition titled "But I am not an Artist" focuses on creative works done by people who have not been classically trained in any art field. The showcased works are from product designers, financial analysts, marketing managers, amongst many others. The goal of this edition is to highlight creativity in the most unexpected places as these inidividuals have expressed themselves through various media such as acrylics, photography, digital art using Adobe Illustrator and other avenues highlighted in the exhibition.<br><br><br><br></p>
<p class="ex1">Exhibition 1</p>
<h2>BUT I AM NOT AN ARTIST</h2>


  <section>
    <div class="container reveal">
      <h3 class="name">Fatima Lodhi</h3>
      <div class="text-container">
        <div class="text-box">
          <h3 class="occupation">Fashion and Multimedia Designer</h3>
        </div>
      </div>
    </div>
  </section>

    <img class="img" src="spaceinvasion - fatima lodhi khan.jpg">
    <img class="img" src="reajacobsacrylic - fatima lodhi khan.jpg">
    <img class="img" src="dreams - fatima lodhi khan.jpg">
    <img class="img" src="euphoria - fatima lodhi khan.jpg">
    <img class="img" src="finefrida - fatima lodhi khan.jpg">
  
  
    <section>
    <div class="container reveal">
      <h3 class="nameb">Fatima Alhalyan</h3>
      <div class="text-container">
        <div class="text-box">
          <h3 class="occupationb">Product and Multimedia Designer</h3>
        </div>
      </div>
    </div>
  </section>
  
  <img class="img" src="Pink_Lady_2021 - Fatima.png">

* {
    margin: 0;
    padding: 0;
}
body {
    height: 7000px;
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(179, 179, 179) 50%, rgb(0, 0, 0) 85%);
}
h1 {
    background-color: rgb(0, 0, 0);
    position: sticky;
    height: 8rem;
    top: 0;
    color: white;
    padding-left: 35px;
    padding-top: 10px;
    font-family: sans-serif;
    
}

a {
    color: white;
    font-family: sans-serif;
}

img {
    width: 50px;
    padding-left: 26px;
}
.content {
        padding: 16px;
        padding-top: 60px;
        padding-left: 35px;
        text-align: left;
        font-family: sans-serif;
        font-size: 20px;
        color: rgb(255, 255, 255);
        background: transparent;
    }

.ex1 {
    font-family: sans-serif;
    font-size: 72px;
    color: white;
    padding-bottom: 20px;
    text-align: center;
    text-decoration: underline;
}

    h2 {
    position: sticky;
    top: 8rem;
    padding-top: 0px;
    text-align: center;
    font-family: sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    background-color: black;
}

.name {
    position: sticky;
    top: 12rem;
    text-align: left;
    font-family: sans-serif;
    font-size: 20px;
    color:rgb(255, 255, 255);
}
.occupation {
    position: sticky;
    top: 13rem;
    text-align: left;
    font-family: sans-serif;
    font-size: 15px;
    color: white;
}

.nameb {
    position: sticky;
    top: 12rem;
    text-align: left;
    font-family: sans-serif;
    font-size: 20px;
    color:black;
}
.occupationb {
    position: sticky;
    top: 13rem;
    text-align: left;
    font-family: sans-serif;
    font-size: 15px;
    color: rgb(0, 0, 0);
}
section{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
section .container{
  margin: 35px;
}
section h1{
  font-size: 3rem;
  margin: 20px;
}
section h2{
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
}
section .text-container{
   display: flex;
}

section .text-container .text-box h3{
  font-size: 30px;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 900px){
  section h1{
    font-size: 2rem;
    text-align: center;
  }
  section .text-container{
    flex-direction: column;
  }
}

.reveal{
  position: relative;
  transform: translateY(20px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}
.img {
    display:block;
    width: 50%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px;
}

 function reveal() {
var reveals = document.querySelectorAll(".reveal");

for (var i = 0; i < reveals.length; i++) {
  var windowHeight = window.innerHeight;
  var elementTop = reveals[i].getBoundingClientRect().top;
  var elementVisible = 150;

  if (elementTop < windowHeight - elementVisible) {
    reveals[i].classList.add("active");
  } else {
    reveals[i].classList.remove("active");
  }
}
}

window.addEventListener("scroll", reveal);

What I have tried:

I want somehow the name and occupation to say visible as I scroll through the images and then [name, occupation, and images] disappear before the next name, occupation and image are revealed, not sure how to do this. I have used "sticky" with "portable digital format" and "but I am not an artist" successfully. I have also added it to .name .occupation in CSS but it doesn't seem to be working properly. how do I make sure they stick unless all the images are scrolled through?