用Java淡入

Question

我正在为我正在开发的网站编写一个小脚本。我绝不是一个优秀的编码人员，但是我觉得我对有限的知识了解很深。现在我的问题。我有以下一段代码及其工作原理，但只有一部分。它似乎在页面Y偏移中的图像中淡出，但有时不起作用。它要么不淡入，要么淡入。当我滚动回到顶部时，它不会淡出。任何帮助表示赞赏！

HTML：

<img id="floatingi" class="vc_hidden-sm vc_hidden-xs alignnone wp-image-442 size-full" 
src="https://www.linkonderwijsadvies.nl/wp-content/uploads/2018/10/temp2.png" alt="" 
width="305" height="650" />

CSS：

#floatingi{
opacity: 0;
transition: opacity 1s;
}

#floatingi.fade {
opacity: 1;
}

Javascript：

<script>
document.addEventListener("scroll", function() {

if (window.pageYOffset > 200){
document.getElementById('floatingi').classList.toggle('fade');
}});
</script>

我也曾尝试将此代码复制到CodePen（并对其进行了一些改动，以便显示一个大的灰色框而不是图像），但问题似乎仍然存在。因此，我认为这与wordpress无关。问候

编辑：

我还尝试了一些看起来有所不同的方法，但效果似乎更好，但它不会淡入淡出。这是以下代码：

HTML：

<img id="floatingi" class="vc_hidden-sm vc_hidden-xs alignnone wp-image-442 size-full" 
src="https://www.linkonderwijsadvies.nl/wp-content/uploads/2018/10/temp2.png" alt="" 
width="305" height="650" />

CSS：

#floatingi{
display: none;
}

Javascript：

<script>
document.addEventListener("scroll", function() {

if (window.pageYOffset > 200){
document.getElementById('floatingi').style.display = "block";
}else{
document.getElementById('floatingi').style.display = "none";
}});
</script>

如果有人知道如何为此添加淡入/淡出，那就太糟糕了！ 亲切的问候！

Answer 1

问题是这部分代码

if (window.pageYOffset > 200){
document.getElementById('floatingi').classList.toggle('fade');
}});   

您每次都在切换该类，因此您可以添加然后再次将其删除。

所以您应该只使用classList.add和classList.remove

并且如评论中所述，您可能应该消除滚动事件