Ein- und Ausblenden des Logos in der Kopfzeile beim Scrollen

Question

Ich habe fast abgeschlossen, was ich tun möchte, aber es gibt einen Fehler und ich frage mich, ob irgendjemand sehen könnte, was falsch ist. Wenn ich zuerst auf die Seite gehe, blinkt die CSS-Animation.

Ich versuche, das Logo und Banner auf meiner Band-Website Here's my website

ich es in dem kleinen Logo auf dem Menü (“.Logo‚) einmal gescrollt hinter dem Header Banner (‘.slides verblassen wollen zu animieren ") und blenden mit einem Scroll wieder zurück. Auch das selbe aber umgekehrt für das Headerbanner.

Hier ist mein Java Script Code jetzt.

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

Hier ist der CSS-Code

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

Answer 1

Es fügt die Klasse zu .slides ‚offenbaren‘, wenn Sie blättern, wie es die ‚anders‘ der, wenn < 200 Zustand übereinstimmt. Dies verursacht das Blinken, da die Klasse beim Laden der Seite nicht vorhanden ist, aber beim Scrollen wird sie sofort hinzugefügt.

Wenn Sie dem Element .slides im Quellcode die Klasse 'reveal' hinzufügen (also beim Laden der Seite vorhanden), sollte das Blinken aufhören.