Как заставить div исчезнуть после прокрутки сверху

Question

Как заставить div исчезнуть после прокрутки сверху

1

Как заставить кружок исчезнуть после прокрутки сверху? Я могу прокрутить круг сверху, но не могу заставить его исчезать одновременно. Я заметил, что после того, как был щелкнут круг, он прокручивается вверх, а затем во втором щелчке круг исчезает.

HTML:

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

ЯШ:

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

Deke 10 май 2018, в 19:33

Источник

Теги:

javascript

css

2 ответа

Ещё вопросы

Neal_Nicdao · Answer 1 · 2018-05-10T17-16-00.000Z

Проверьте положение прокрутки в событии прокрутки в инструкции if.

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"; 
});

git-e-up · Answer 2 · 2018-05-10T16-02-00.000Z

Как и в другом ответе, кажется, что, устанавливая 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 = '#'
})