Click here to Skip to main content
15,942,710 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.

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


CSS
* {
    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;
}


JavaScript
 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?
Posted
Updated 25-Feb-22 1:43am

1 solution

I did a quick Google search for css sticky sections[^] and found this step-by step blog post: CSS Position Sticky Tutorial With Examples[Complete Guide][^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900