Question

如何在滚动顶部后让圆圈消失？我可以在顶部滚动圆圈，但无法让它同时消失。我注意到点击圆圈后，它会滚动到顶部，然后在第二次点击时，圆圈消失。

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

与其他答案一样，通过点击设置window.location，您可能会影响滚动，从而使#circleShapeId可见。大概你只想在开始向下滚动时出现#circleShapeId，如果你回到顶部你希望它消失。

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

滚动到顶部

1 个答案: