Jquery 滚动时标题上的淡入淡出徽标

我几乎完成了我想做的事情，但是有一个小故障，我想知道是否有人能看到哪里出了问题。当我第一次进入页面时，CSS动画会闪烁

我正试图在我的乐队网站上制作标志和横幅的动画

我想它淡入菜单上的小标志（“.logo”）一旦滚动过标题横幅（“.slides”）和淡出与滚动备份。标题标题也相同，但反之亦然

下面是我的JavaScript代码

jQuery(document).on("scroll", function(){
    if
  (jQuery(document).scrollTop() > 200){
      jQuery(".logo").addClass("reveal");
    }
    else
    {
        jQuery(".logo").removeClass("reveal");
    }
});

jQuery(document).on("scroll", function(){
    if
  (jQuery(document).scrollTop() > 200){
      jQuery(".slides").removeClass("reveal");
    }
    else
    {
        jQuery(".slides").addClass("reveal");
    }
});

这是CSS代码

.slides {
opacity: 1;
}


.logo {
opacity: 0;
}

.reveal {
opacity: 1;
-webkit-animation: reveal 0.4s ease-in-out;
-moz-animation: reveal 0.4s ease-in-out;
}

@-moz-keyframes reveal {
from {
    opacity: 0;
}

to {
    opacity: 1;
};
}

@-webkit-keyframes reveal {
from {
    opacity: 0;
}

to {
    opacity: 1;
};
}

---

当您滚动时，它会将“显示”类添加到.slides，因为它与if<200条件的“else”匹配。这会导致闪烁，因为类在页面加载时不存在，但在滚动时会立即添加

如果您在源代码中的.slides元素中添加了“reveal”类（因此页面加载时它就在那里），闪烁应该消失