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>