如何防止覆盖/标题在网站上第二次显示

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使用布尔值来实现此目的。

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

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

Answer 2

与其测量用户从页面顶部滚动的距离，我会在用户使用 jQuery 滚动的第一个迹象时激活该功能。 例如：

var firstScroll = false;

$(window).on('scroll', function() {
  if ( !firstScroll ) {
      hideWelcomeMessage();
  }
});

function hideWelcomeMessage() {

    firstScroll = true;        

    // Your code here
    document.getElementById("home").style.height = "0%";
}

我希望这有帮助！