javascript：当 window 到达顶部时

Question

我的 CodePen 中的这段代码可以在我向下滚动时更改div.box的高度。 当我反向滚动（向上滚动）时，它也可以工作。 当我到达 window 的顶部时，它似乎不起作用。 当 window 到达顶部时，您知道我的代码有什么问题，或者添加什么以使其在所有这 3 种情况下都能正常工作？

这是完整的 CodePen，所以你可以明白我的意思： 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; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script> <div class="box"></div> <div class="sp"></div>

Answer 1

您需要首先检查最具体的条件； 在这种情况下，您应该首先检查 y 位置是否为0 ，因为这也将通过检查当前 position 是否小于之前的条件来涵盖。

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script> <div class="box"></div> <div class="sp"></div>