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

我希望这会有所帮助！

如何防止叠加层/标题在网站上再次显示

2 个答案: