Sticky header and hidden content with box-shadow

Question

I'm new to coding and on my way to becoming a Junior Dev. This is also my first post on Stack Overflow.

Situation:

I have made a sticky header that has a box-shadow property intended to uncover content when scrolling down and hover on the body section. The box-shadow values are set to make the content hidden and only the nav header appears as visible. The header has position: fixed;

Question: I was wondering if it's possible to make my content still be as hidden when the browser is open (just at the moment of opening, but unhide it when scrolled on the body section. If so, where could I apply the box-shadow property or is there a better way to do it? My knowledge is limited but so I'm looking for ways.

Code

window.addEventListener("scroll", function() {
  const header = document.querySelector("header");
  header.classList.toggle("sticky", window.scrollY > 0);
})

/* experimental start */
.wrapper-nav {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  display: flex;
  transition: 3s;
  padding: 20px 40px;
  justify-content: space-around;
  background-color: goldenrod;
  box-shadow: 0px 400px 300px 1000px;
  color: blueviolet;
  z-index: 1;
}

.wrapper-nav:hover {
  box-shadow: none;
  transition: 0.6s;
}

<header>
  <nav>
    <div class="container-nav">
      <div class="wrapper-nav">
      </div>
    </div>
  </nav>
</header>

<main>
  <h1>Lorem</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.

  </p>
  <h1>Lorem</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.

  </p>
  <h1>Lorem</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.

  </p>
  <h1>Lorem</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.

  </p>
</main>

Additional: Any improvements on how to write a better code or create a better inquiry on StackOverflow are welcome.

Thank you for your time.

Realized I need to change some CSS after receiving help. Thank you!

.wrapper-nav {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    display: flex;
    transition: 2s;
    padding: 20px 40px;
    justify-content: space-around;
    background-color: goldenrod;
}

.wrapper-nav:hover {
    box-shadow: none;
    transition: 2s;
    box-shadow: 0px 400px 300px 1000px;
    color: blueviolet;
    z-index: 1;
}

Welcome to stackoverflow! What about the reaction on hover in your CSS - you didn't write something about it? — biberman
Thank you very much! It actually worked, didn't think I was doing it backwards. — Vitoldas

Mehnoor Siddiqui Mehnoor Siddiqui · Accepted Answer · 2021-05-31T12:31:54

Welcome!

const main= document.querySelector("main");
window.addEventListener("scroll", function() {
  const header = document.querySelector("header");
  main.style.boxshadow=none;
  header.classList.toggle("sticky", window.scrollY > 0);
})

window.addEventListener("DOMContentLoaded"),function(){
  main.style.boxshadow= 0px 400px 300px 1000px;
}

Due to short time, I didn't run it but tried to answer the question on DOMload event the content is hidden on scroll I change the style to none to make it visible.

Sticky header and hidden content with box-shadow

1 Answers