javascript:当窗口到达顶部时

Question

我的 CodePen 中的此代码用于更改我的高度 div.box当我向下滚动时。当我反向滚动(向上滚动)时它也有效。当我到达窗口顶部时，它似乎不起作用。当窗口到达顶部时，您知道我的代码有什么问题吗，或者要添加什么才能使其在所有这 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首先，因为这也将通过检查当前位置是否小于前一个条件来涵盖。

  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>