在 Wordpress 中使用 JavaScript 平滑显示/隐藏滚动的 div

Question

我是 js 新手，我一直遇到使用 js onscroll 显示和隐藏 div 的问题。幸运的是，我能够弄清楚这一点，但现在我的问题是，当 div 显示和隐藏时，它非常突然，我希望它在显示和隐藏期间淡入和淡出过渡。我尝试通过 css 添加过渡并添加到 js 中，但没有任何效果。请参阅下面的代码，希望您能够帮助我。请知道，我正在尝试在 WordPress 网站内执行此操作并使用插件 WPCode Lite 添加 JS

这是我的JS：

<script>
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (window.screen.width > 780) {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        var element = document.getElementById("headbar");
      element.classList.remove("show");
      element.classList.add("hide");

  } else {
     var element = document.getElementById("headbar");
    element.classList.remove("hide");
    element.classList.add("show");
  }
}   
}
</script>

这是我的CSS：

#headbar {
    transition: all .5s;
}
.hide {
    opacity:0;
    transition: all .5s;
}
.show {
    opacity:1;
    transition: all .5s;
  
}

我尝试通过 css 添加过渡并添加到 js 中，但都不起作用

Answer 1

也为

opacity

设置一个数字

#headbar

，以便它可以转换

#headbar {
  opacity: 1;
  transition: all .5s;
}

#headbar.hide {
  opacity: 0;
}

#headbar.show {
  opacity: 1;
}