javascript: when window reaches the top

Question

This code in my CodePen works to change the height of my div.box when I scroll down. It also works when I reverse scroll (scroll back up). When I reach the top of the window, it doesn't seem to work. Do you know what's wrong with my code when the window reaches the top, or what to add to make it work in all of these 3 cases?

Here is the full CodePen so you can see what I mean: https://codepen.io/celli/pen/LYNYNQq

gsap.set(".box", {
  transformOrigin: "top left"
});

var lastScrollTop = 0;
window.addEventListener("scroll", function() {
  var st = window.pageYOffset || document.documentElement.scrollTop;
  if (st > lastScrollTop) {
    // down-scroll code
    gsap.to(".box", {
      scaleY: .2
    })

  } else if (st < lastScrollTop) {
    // up-scroll code
    gsap.to(".box", {
      scaleY: .5
    })

  } else if (window.pageYOffset == 0) {
    // when the window reaches the top
    gsap.to(".box", {
      scaleY: 1
    })
  }

  lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

/*
gsap.to(".box", {
  scaleY:1,
  ease: "circ:out",
  scrollTrigger: {
    trigger: ".box",
    markers:true,
    start: "top top",
    toggleActions:"play none none reverse"
  }, 
}); 
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.box {
  width: 100%;
  height: 200px;
  background-color: aqua;
  opacity: .5;
  position: fixed;
}

.sp {
  height: 1000px;
  width: 100%;
  background-color: #cccccc;
}

user_9513184 · Answer

You need to check the most specific conditions first; in this case, you should check if the y-position is 0 first, as that will also be covered by checking if the current position is less than the previous condition.

  if(st === 0){
    // when the window reaches the top
    gsap.to(".box", {
      scaleY: 1
    })
  } else if (st > lastScrollTop) {
    // down-scroll code
    gsap.to(".box", {
      scaleY: .2
    })

  } else if (st < lastScrollTop) {
    // up-scroll code
    gsap.to(".box", {
      scaleY: .5
    })
  }

gsap.set(".box", {
  transformOrigin: "top left"
});

var lastScrollTop = 0;
window.addEventListener("scroll", function() {
  var st = window.pageYOffset || document.documentElement.scrollTop;
  if(st === 0){
    // when the window reaches the top
    gsap.to(".box", {
      scaleY: 1
    })
  } else if (st > lastScrollTop) {
    // down-scroll code
    gsap.to(".box", {
      scaleY: .2
    })

  } else if (st < lastScrollTop) {
    // up-scroll code
    gsap.to(".box", {
      scaleY: .5
    })
  }

  lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.box {
  width: 100%;
  height: 200px;
  background-color: aqua;
  opacity: .5;
  position: fixed;
}

.sp {
  height: 1000px;
  width: 100%;
  background-color: #cccccc;
}

javascript: when window reaches the top

1 Answers