活动类滚动与javascript

Question

当我要到第二页h1必须翻译并变得可见时，我想在滚动中激活类，但我认为我的js代码有问题

window.addEventListener('scroll', function() {
let fadeText = document.querySelector('.fade');
if (window.scrollY < window.innerHeight) {
fadeText.classList.add('fade-in');
}
});

.section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
}
.section {
width: 100%;
height: 100vh;
border: 1px solid;
}
.fade {
font-size: 5em;
transform: translateY(100%);
color: red;
opacity: 0;
/* Add a default opacity value */
transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}
.fade_in {
opacity: 1;
/* Change opacity to 1 when the 'fade-in' class is added */
transform: translateY(0%);
}

<div class="section">1</div>
<div class="section">3
<h1 class="fade">ELEMENTS</h1>
</div>

Answer 1

当你滚动到包含3个元素的下一部分时，你想要显示文本" Element "，那么你也应该删除" fade "类，因为目前你在一个元素上有2个类，因此只有一个css在应用，在你的情况下，它的不透明度为0，所以你只需要用class remove升级js，你就准备好了。

代替这段代码

window.addEventListener('scroll', function() {
let fadeText = document.querySelector('.fade');
if (window.scrollY < window.innerHeight) {
fadeText.classList.add('fade-in');
}
});

用这个

window.addEventListener('scroll', function() {
let fadeText = document.querySelector('.fade');
if (window.scrollY < window.innerHeight) {

fadeText.classList.add('fade-in');
fadeText.classList.remove('fade');
}
});

，您的问题将得到解决。如果还有什么问题，请告诉我。

工作小提琴

正如你在评论中提到的，你想让section像给出的例子一样，然后阅读这里的滚动动画，或者你可以检查这个漂亮的动画演示，这是你想要的。