Question

我正在做一个小项目，我的网站在底部加载，用户“向上”滚动以查看更多内容。为了表明您必须向上滚动，我为一些向上的箭头设置了动画。

我的问题是，一旦用户向上滚动到下一部分，我似乎无法隐藏箭头。

我尝试了 z-index 和此处提供的其他一些 Javascript 解决方案，但我无法使其中的任何一个工作。许多其他解决方案是在向下滚动时隐藏菜单然后在向上滚动时重新出现的复杂方法，但是，我正在寻找一种简单的方法来隐藏元素。

document.location.hash = 'landing';

document.onscroll = function() {
  if (window.innerHeight + window.scrollY > document.body.clientHeight) {
    document.getElementById('hide-arrow').style.display = 'none';
  }
}

/* !... GLOBAL ...! */

* {
  margin: 0;
  padding: 0;
}


/* !... BODY ...! */

body {
  font-family: Nonoto, Arial, sans-serif;
  background: #333;
  color: #fff;
  line-height: 1.6;
  height: 100vh;
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}


/* !... NAVIGATION ...! */

.space-nav {
  position: fixed;
  top: 0;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 60px;
  background: rgba(0, 0, 0, 0.7);
}

.space-nav ul {
  display: flex;
  list-style: none;
  width: 100%;
  justify-content: center;
}

.space-nav ul li {
  margin: 0 1rem;
  padding: 0 1rem;
}

.space-nav ul li a {
  text-decoration: none;
}

.space-nav ul li a:hover {
  /* TBD */
}


/* ...ARROWS... */

.arrow {
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translate(-200%, -200%);
}

.arrow span {
  display: block;
  width: 30px;
  height: 30px;
  border-top: 5px solid #ba6081;
  border-left: 5px solid #ba6081;
  transform: rotate(45deg);
  margin: -10px;
  animation: scroll 2s infinite;
}

.arrow span:nth-child(2) {
  animation-delay: -.2s;
}

.arrow span:nth-child(3) {
  animation-delay: -.4s;
}

@keyframes scroll {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/* ..SECTION STYLING ...*/

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
}

section#ready {
  background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;
  ;
}

section#lift-off {
  background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;
  ;
}

section#deep-space {
  background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;
  ;
}

section#landing {
  background: url('test.png') no-repeat center center/cover;
  ;
  overflow: auto;
}


/* !... FONT STYLING ...! */

p {
  font-size: 12px;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 18px;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, inital-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> A title </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <nav class="space-nav">
      <ul>
        <li><a href="#ready">Ready to Launch</a></li>
        <li><a href="#lift-off">Lift Off</a></li>
        <li><a href="#deep-space">Deep-Space</a></li>
        <li><a href="#landing">Landing</a></li>
      </ul>
    </nav>

    <section id="ready">
      <h1>Welcome to my Journey</h1>
      <h2>Prepare for liftoff</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



      </p>
    </section>

    <section id="lift-off">
      <h1>Welcome to my Journey</h1>
      <h2>Prepare for liftoff</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </section>

    <section id="deep-space">
      <h2>Prepare for liftoff</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </section>

    <section id="landing">

      <div class="arrow" id="hide-arrow">
        <span></span>
        <span></span>
        <span></span>
      </div>


      <h2>Prepare for liftoff</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </section>

  </div>



  <script src="main.js"></script>
</body>


</html>

Answer 1

我认为您在为箭头应用 CSS 时犯了一个错误。您需要在 id="landing" 的部分中使用该箭头。所以你只需添加 CSS

#landing{
position : relative;
}

使用此 CSS，您的箭头不会出现在所有部分。

当用户向上滚动时隐藏动画箭头

1 个答案: