Auf Scroll und Fade Javascript

Question

Im Moment ist mein Code dieses

myID = document.getElementById("responsive-menu-button"); 

`enter code here`var myScrollFunc = function() { 
    var y = window.scrollY; 
    if (y >= 200) { 
    myID.className = "bottomMenu show" 
    } else { 
    myID.className = "bottomMenu hide" 
    } 
}; 

window.addEventListener("scroll", myScrollFunc); 

aber im Moment ist es zeigt nur, und versteckt die DIV. Ich möchte einen Fade-Effekt wie .fadeIn(); hinzufügen, aber ich kann das überhaupt nicht innerhalb des Chrome-Entwicklungstools im Code-Ausschnitt erreichen.

Irgendwelche Ideen? Alle Skripte mit '$' scheinen dann nicht im Chrome Code Snippet Tester zu funktionieren.

Dank

Answer 1

Sie es erreichen können einfach CSS und JS

CSS wird #responsive-menu-button{transition: all ease .6s;}

Und JavaScript

if (y >= 200) { 
    myID.className = "bottomMenu" 
    myID.style.opacity='.1'; 
    setTimeout(function(){myID.style.display='none'},600); 
} 
else { 
    myID.className = "bottomMenu" 
    myID.style.display=''; 
    myID.style.opacity='1'; 
}