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


Joined
Feb 25, 2022
Messages
2
Reaction score
0
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.

Code:
<!DOCTYPE html>
<html>
<head>
    <title>PDF</title>
</head>

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


<body>

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


</body>

<script>
    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);
</script>

</html>
 
Ad

Advertisements

Joined
Mar 3, 2021
Messages
243
Reaction score
29
I think the problem is that your sections' contents aren't sticky. Try throwing this at the bottom of your CSS. Full disclosure, I'm not really a web or front-end dev, so there might be a better or more elegant way to accomplish this.

CSS:
div.container {
    position: sticky;
    top: 10em;
}
div.container h3 {
    position: sticky;
    top: 8.25em;
}
 
Joined
Feb 25, 2022
Messages
2
Reaction score
0
I think the problem is that your sections' contents aren't sticky. Try throwing this at the bottom of your CSS. Full disclosure, I'm not really a web or front-end dev, so there might be a better or more elegant way to accomplish this.

CSS:
div.container {
    position: sticky;
    top: 10em;
}
div.container h3 {
    position: sticky;
    top: 8.25em;
}

Thank you for your response. I removed the divs and sections and just had the elements floating and that worked. now I am trying to figure out how to make the sticky headers stop being sticky once the next participant's work is being showcased XD
 
Ad

Advertisements

Joined
Mar 3, 2021
Messages
243
Reaction score
29
I think that part was working with just the CSS I've added and not moving your sections around. Can you try that again?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top