Как заставить кружок исчезнуть после прокрутки сверху? Я могу прокрутить круг сверху, но не могу заставить его исчезать одновременно. Я заметил, что после того, как был щелкнут круг, он прокручивается вверх, а затем во втором щелчке круг исчезает.
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;
}
Проверьте положение прокрутки в событии прокрутки в инструкции 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";
});
Как и в другом ответе, кажется, что, устанавливая 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 = '#'
})