I want the square to be yellow with each scroll down, and the square to be green with each scroll up.
This snippet works almost the way I want it to, because what I want happens only when the square is no longer fully visible on the viewport.
I would like the scroll down to be yellow and the scroll up to be green.
const square = document.querySelector('.square');
const squarePos = square.getBoundingClientRect().top;
console.log(squarePos);
window.addEventListener('scroll',mouse=>{
const scrollTop = window.scrollY;
if (scrollTop >squarePos) {
square.style.background = "yellow";
}
else{
square.style.background = "green";
}
});.square{
width:100px;
height:100px;
position:relative;
margin:0 auto;
background:red;
top:200px;
}
.content{
width:100vw;
height:150vh;
}<div class = 'square'></div>
<div class = 'content'></div>>Solution :
You need to compare your squarePos with the previous square pos, not the client y. Set the position with let, and update the value after each event listener callback.
const square = document.querySelector('.square');
let squarePos = square.getBoundingClientRect().top;
window.addEventListener('scroll', mouse => {
if (square.getBoundingClientRect().top > squarePos) {
square.style.background = "yellow";
}
else{
square.style.background = "green";
}
squarePos = square.getBoundingClientRect().top;
});.square{
width:100px;
height:100px;
position:relative;
margin:0 auto;
background:red;
top:200px;
transition: background 200ms ease;
}
.content{
width:100vw;
height:150vh;
}<div class = 'square'></div>
<div class = 'content'></div>