您如何使这种淡入淡出效果正常工作?

Question

我正在尝试通过添加一个效果来完成挑战，其中我的名字出现在加载中，然后在滚动时消失。唯一的问题是，我只能在向下滚动并向上滚动时看到是否。我确切地知道问题出在哪里，但是因为我是从其他地方获得此代码的，所以我不太确定如何使用它。 在 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>