I need sticky headers to stop being sticky beyond a certain point

February 27, 2022

I have a set up where once the artworks are displayed, there’s the name and occupation of the participant on the left. I have managed to make it sticky so we can scroll through the images and have their name on the left. now I want that once the images of the first participant are done, that their name also scrolls out (so sticky ends) and that the new participant name can take over with their image. rigth now they overlap. I need to figure out how to make it exit with the last image.

The CSS class sections I am talking about are .name and .occupation / .nameb and .occupationb

Here is my code:

* {
    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: 14rem;
    text-align: left;
    font-family: sans-serif;
    font-size: 20px;
    color:rgb(255, 255, 255);
}
.occupation {
    position: sticky;
    top: 16rem;
    text-align: left;
    font-family: sans-serif;
    font-size: 15px;
    color: white;
}

.nameb {
    position: sticky;
    top: 14rem;
    text-align: left;
    font-family: sans-serif;
    font-size: 20px;
    color:black;
}
.occupationb {
    position: sticky;
    top: 16rem;
    text-align: left;
    font-family: sans-serif;
    font-size: 15px;
    color: rgb(0, 0, 0);
}

.img {
    display:block;
    width: 50%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px;
}

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


 
  <h3 class="name">Fatima Lodhi</h3>
  <p class="occupation">Fashion and Multimedia Designer</p>
 
 

    <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">
  
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  

  <h3 class="nameb">Fatima Alhalyan</h3>
  <p class="occupationb">Product and Multimedia Designer</p>


  
  <img class="img" src="Pink_Lady_2021 - Fatima.png">

Ps: I am really new to coding, so please it explain it in simple terms. And from the info I gathered online, I think I need to use javascript for this, but I have no idea how. Thanks in advance for any help.

>Solution :

The easiest way to solve this is to add the content into sections. A sticky element will not be moved completely out of flow. So it remains an element within it’s parent element and as such will leave the viewport if the parent element leaves it aswell.

I added a section just for the h1 up to the enxt h2 element to demonstrate the solution:

* {
  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: 14rem;
  text-align: left;
  font-family: sans-serif;
  font-size: 20px;
  color: rgb(255, 255, 255);
}

.occupation {
  position: sticky;
  top: 16rem;
  text-align: left;
  font-family: sans-serif;
  font-size: 15px;
  color: white;
}

.nameb {
  position: sticky;
  top: 14rem;
  text-align: left;
  font-family: sans-serif;
  font-size: 20px;
  color: black;
}

.occupationb {
  position: sticky;
  top: 16rem;
  text-align: left;
  font-family: sans-serif;
  font-size: 15px;
  color: rgb(0, 0, 0);
}

.img {
  display: block;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
  padding-top: 20px;
}

<section>>
  <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>
</section>
<h2>BUT I AM NOT AN ARTIST</h2>



<h3 class="name">Fatima Lodhi</h3>
<p class="occupation">Fashion and Multimedia Designer</p>



<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">

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>


<h3 class="nameb">Fatima Alhalyan</h3>
<p class="occupationb">Product and Multimedia Designer</p>



<img class="img" src="Pink_Lady_2021 - Fatima.png">