title: Hide animated arrow when user scrolls up
body: <p>I am working on a little project where my website loads at the bottom and the user scrolls &quot;up&quot; to view more content. To indicate that you have to scroll up, I've animated some arrows that point upwards.</p>
  <p>My problem is I can't seem to hide the arrow once the user has scrolled up to the next section.</p>
  <p>I have attempted z-index and some other Javascript solutions provided here but I can't manage to make any of it work. A lot of the other solutions are complex ways to hide menus on scroll down and then to re-appear once you scroll up however, I'm looking for a simple method to just hide the elements.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.location.hash = 'landing';
  
  document.onscroll = function() {
    if (window.innerHeight + window.scrollY &gt; document.body.clientHeight) {
      document.getElementById('hide-arrow').style.display = 'none';
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* !... 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, inital-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt; A title &lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;nav class="space-nav"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#ready"&gt;Ready to Launch&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#lift-off"&gt;Lift Off&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#deep-space"&gt;Deep-Space&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#landing"&gt;Landing&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
  
      &lt;section id="ready"&gt;
        &lt;h1&gt;Welcome to my Journey&lt;/h1&gt;
        &lt;h2&gt;Prepare for liftoff&lt;/h2&gt;
        &lt;p&gt;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.
  
  
  
        &lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section id="lift-off"&gt;
        &lt;h1&gt;Welcome to my Journey&lt;/h1&gt;
        &lt;h2&gt;Prepare for liftoff&lt;/h2&gt;
        &lt;p&gt;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.
        &lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section id="deep-space"&gt;
        &lt;h2&gt;Prepare for liftoff&lt;/h2&gt;
        &lt;p&gt;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.
        &lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section id="landing"&gt;
  
        &lt;div class="arrow" id="hide-arrow"&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;span&gt;&lt;/span&gt;
        &lt;/div&gt;
  
  
        &lt;h2&gt;Prepare for liftoff&lt;/h2&gt;
        &lt;p&gt;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.
        &lt;/p&gt;
      &lt;/section&gt;
  
    &lt;/div&gt;
  
  
  
    &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>