title: How do I make the div disappear after scrolling on top
body: <p>How do I make the circle disappear after scrolling on top? I'm able to scroll the circle on top but unable to make it disappear at the same time. I noticed that after the circle has been clicked, it scrolls on to the top, And then on the second click, the circle disappears.  </p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="divOne"&gt;&lt;/div&gt;
  &lt;div class="circleShape" id="circleShapeId"&gt;:)&lt;/div&gt;
  &lt;div class="divTwo"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>window.addEventListener('scroll', function(e) {
    document.getElementById('circleShapeId').style.display = "block"  
    document.getElementById('circleShapeId').style.position = "fixed"  
  })
  
  
   document.getElementById('circleShapeId').addEventListener('click', function(){
    document.getElementById('circleShapeId').style.display = "none" 
    window.location = '#'
  })
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.circleShape{
    height: 50px;
    background-color: red;
    width: 50px;
    border-radius: 30px;
    text-align: center;
    border: 2px solid white;
    cursor: pointer;
    float: left;
    margin-left: 30px;
    position: static;
    display: none;
   }
  
  .divOne {
    height: 300px;
    background-color: yellow;
  }
  
  .divTwo{
    height: 300px;
    background-color: pink;
  }
  </code></pre>