带有盒子阴影的粘性标题和隐藏内容

Question

我是编码新手，并且正在成为一名初级开发人员。这也是我在 Stack Overflow 上的第一篇文章。

情况：

我制作了一个带有 box-shadow 属性的粘性标题，旨在在向下滚动并悬停在正文部分时发现内容。 box-shadow 值设置为隐藏内容，只有导航标题显示为可见。标头有位置：固定；

问题： 我想知道是否可以在浏览器打开时使我的内容仍然隐藏（仅在打开时，但在正文部分滚动时取消隐藏。如果是这样，我可以在哪里应用 box-shadow 属性或有更好的方法吗？我的知识有限，所以我正在寻找方法。

代码

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>

补充：欢迎对如何编写更好的代码或在 StackOverflow 上创建更好的查询进行任何改进。

感谢您的宝贵时间。

在获得帮助后意识到我需要更改一些 CSS。谢谢！

.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;
}

Answer 1

欢迎！

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

由于时间短，我没有运行它，但尝试回答有关 DOMload 事件的问题，内容在滚动时隐藏我将样式更改为无以使其可见。