滚动通过时如何使内容消失？

Question

I am making a scroll effect in JavaScript. I can make it appear when you scroll down, but how to make it disappear when you scroll past it?

this is what I got so far.

window.onload = function(){
  const EFFECT = document.querySelector("#about_page");

  window.addEventListener('scroll', scrollEffect);

  function scrollEffect(){
    if(window.scrollY >= 550) {
      EFFECT.style.opacity = '1';
      EFFECT.style.transform = 'scale(1)';
      EFFECT.style.transition = '500ms ease-in-out';
    }

    else if(window.scrollY <= 500) {
      EFFECT.style.opacity = '0';
      EFFECT.style.transform = 'scale(0)';
      EFFECT.style.transition = '500ms ease-in-out';
    }

    else {
      EFFECT.style.opacity = '0';
      EFFECT.style.transform = 'scale(0)';
    }
  }
  scrollEffect();
}

Answer 1

Add an upper-bound to your first if statement:

if(window.scrollY >= 550 && window.scrollY < 750) {

Just replace 750 with whatever value you want to trigger the fade-out.