滾動時在標題上淡入淡出徽標

我幾乎完成了我想要做的事情，但出現了一個小故障，並想知道是否有人可以看到什麼是錯誤的。當我第一次瀏覽頁面時，CSS動畫會閃爍。滾動時在標題上淡入淡出徽標

我試圖動畫曾經滾過的標題橫幅上我的樂隊的網站標誌和橫幅Here's my website

我希望它在菜單（」 .logo‘）上的小標識褪色（’.slides 「），並退回到滾動備份。標題橫幅也是相同的，反之亦然。

這裏是我的javacript代碼。

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; 
}; 
}

來源

2017-04-13 Luke Snitter