显示在滚动操作和淡化的Javascript

Question

目前我的代码是这样的

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

但目前它只是显示和隐藏DIV。我想添加一个淡入淡出的效果，如.fadeIn();，但我无法在代码片段中的chromes开发工具中使用它。

任何想法？所有带'$'的脚本似乎都不适用于chromes代码片段测试器。

感谢

Answer 1

可以使用简单的CSS和JS

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

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