javascript - 我需要粘性 header 来停止粘性超出某一点

Question

我有一个设置，一旦展示艺术品，左侧就会显示参与者的姓名和职业。我设法让它粘起来，这样我们就可以滚动图像并将它们的名字放在左侧。现在我希望一旦第一个参与者的图像完成，他们的名字也会滚动出来(如此粘性结束)，并且新的参与者名称可以接管他们的图像。现在它们重叠了。我需要弄清楚如何让它随着最后一张图像退出。

我所说的 CSS 类部分是 .name 和 .ocupation/.nameb 和 .ocupationb

这是我的代码:

* {
    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:我对编码真的很陌生，所以请用简单的术语解释一下。从我在网上收集的信息来看，我认为我需要使用 javascript 来实现此目的，但我不知道如何使用。预先感谢您的帮助。

Answer 1

解决此问题的最简单方法是将内容添加到各个部分中。 粘性元素不会完全移出流程。因此，它仍然是其父元素中的一个元素，因此如果父元素也离开它，它也会离开视口(viewport)。

我为 h1 添加了一个部分，直到 enxt h2 元素来演示解决方案:

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