如何让这个淡入效果正常工作？

Question

我试图通过添加一个效果来完成一个挑战，让我的名字出现在onload上，然后在滚动时消失。唯一的问题是，我只能在向下滚动和向上滚动时才能看到。我知道问题到底出在哪里，但因为我是从别的地方得到这段代码的，所以我不太清楚如何处理它。在if语句中，有一个参数window.scrollY>500。我知道我必须将这个数字改为不同的值，但我不知道如何确定将它改为什么数字。谁能更好地给我解释一下这到底是什么意思，以及如何确定使它变成什么值，以便我更好地理解，供将来参考？任何帮助都是非常感激的。

window.onload = function() {
    const EFFECT = document.getElementById('headingName');

    window.addEventListener('scroll', scrollEffect);
    function scrollEffect() {
        if(window.scrollY>500) {
            EFFECT.style.opacity = '1';
            EFFECT.style.transform = 'translateX(0px)';
            EFFECT.style.transition = '1s ease-in-out';
        }
        else {
            EFFECT.style.opacity = '0';
            EFFECT.style.transform = 'translateX(-50px)';
        }
    }
    scrollEffect();
}

  <h1 id='headingName'>Alex Schmidt</h1>

Answer 1

我建议使用CSS和简单的类来切换样式。

我已经添加了一些额外的样式和填充文字来使这个例子发挥作用，这些都在代码中注明了。

我想你的版本不能正常工作的原因是由于 transition 在你试图触发效果时，过渡需要在样式改变之前存在。这意味着，当你第一次到达500点时（500意味着你已经向下滚动了500个像素），没有设置过渡，而样式将被立即应用。

在下面的CSS中，你可以看到，过渡设置在 #headingName因此，无论当前是否可见，都会应用到该元素上（这意味着显示和隐藏的过渡都会被显示出来

window.onload = function() {
  const EFFECT = document.getElementById('headingName');

  window.addEventListener('scroll', scrollEffect);

  function scrollEffect() {
    if (window.scrollY > 500) {
      EFFECT.classList.add("show");
    } else {
      EFFECT.classList.remove("show");
    }
  }
  scrollEffect();
}

#headingName {
  /* This is just to make the example functional */
  position: fixed;
  top: 0;
  left: 0;
  
  /* This is the important bit */
  opacity: 0;
  transform: translateX(-50px);
  transition: 1s ease-in-out;
}

#headingName.show {
  opacity: 1;
  transform: translateX(0px);
}

/* This is just so that the page is scrollable and the example works */
#fillerText {
  display: block;
  width: 10px;
}

<h1 id='headingName'>Alex Schmidt</h1>
<div id='fillerText'>
  Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text Filler text
</div>