javascript: когда окно достигает вершины - PullRequest
Новая
       45

javascript: когда окно достигает вершины

2 голосов
/ 05 августа 2020

Этот код в моем CodePen работает для изменения высоты моего div.box при прокрутке вниз. Это также работает, когда я прокручиваю в обратном направлении (прокручиваю назад). Когда я добираюсь до верхней части окна, кажется, что это не работает. Вы знаете, что не так с моим кодом, когда окно достигает вершины, или что нужно добавить, чтобы он работал во всех этих трех случаях?

Вот полный код 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>

1 Ответ

2 голосов
/ 05 августа 2020

Вам нужно сначала проверить самые конкретные c условия; в этом случае вы должны сначала проверить, является ли 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>
...