在顶部滚动后，如何使div消失

Question

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.

html:

<div class="divOne"></div>
<div class="circleShape" id="circleShapeId">:)</div>
<div class="divTwo"></div>

js:

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 = '#'
})

css:

.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;
}

Answer 1

Check the scroll position in the scroll event in an if statement.

window.addEventListener('scroll', function(e) {
     // 10 is a threshold, probably in pixels
    if (document.body.scrollTop < 10)
        document.getElementById('circleShapeId').style.display = "none";
    else
        document.getElementById('circleShapeId').style.display = "block"; 
});

Answer 2

Like the other answer, it would seem that by setting the window.location on click, you're effecting a scroll, thus keeping #circleShapeId visible. Presumably you only want the #circleShapeId to appear when you begin scrolling down and you want it to disappear if you go back to the top.

window.addEventListener('scroll', function(e) {
  if (this.oldScroll < this.scrollY){
    document.getElementById('circleShapeId').style.display = "block"  
    document.getElementById('circleShapeId').style.position = "fixed" 
  }
  else if(this.scrollY == 0){
    document.getElementById('circleShapeId').style.display = "none"  
    document.getElementById('circleShapeId').style.position = "static" 
  }
  this.oldScroll = this.scrollY;
})


 document.getElementById('circleShapeId').addEventListener('click', function(){
  window.location = '#'
})