javascript - 如何防止覆盖/标题在网站上再次显示

Question

我的作品集打开时会显示一个欢迎覆盖层，当滚动时，它会通过将高度降低到“0%”来摆脱覆盖层并显示我的作品。问题是每次我返回主页(也是我的工作页面)时，覆盖标题都会再次加载，这是我不想要的。我怎样才能阻止它再次加载？

HTML

<section id="home" class="home">
    <div class="homeContainer">
      <img id="logo" src="images/00 - Logo/Logo.png">
      <h1 id="navTitle">Hi, my name is Menachem Polonsky.</h1>
      <p id="navBody">Are you ready for an adventure?</p>
      <div id="homeLine"></div>
  </div>
</section>

CSS

 .home {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: .8s;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background: linear-gradient(47.77deg, #05070F 27.82%, #122837 56.13%, #567582 100%);
}

JS

    // Close Home

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 1 || document.body.scrollBottom > 1) {
    document.getElementById("home").style.height = "0%";
  }
}

Answer 1

您可以在 localStorage 中使用 bool 值来实现此目的。

    let res = localStorage.getItem("overlay");
    if (res == null || res === false) {
        // show overlay here
        console.log('setting overlay');
        localStorage.setItem("overlay", true);
    } else { return; }

您可以将这些添加到您的scrollFunction()