在滚动和淡入淡出 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';
}