Плавное отображение/скрытие прокрутки div с использованием JavaScript в Wordpress ⇐ CSS

[Anonymous]

Я новичок в js, и у меня возникла проблема с отображением и скрытием элемента div с помощью js onscroll. К счастью, мне удалось это выяснить, но теперь моя проблема в том, что когда div отображается и скрывается, это происходит очень резко, и я хочу, чтобы он плавно появлялся и исчезал во время показа и скрытия. Я пытался добавить к нему переход через CSS и JS, но ничего не помогло. Пожалуйста, посмотрите мой код ниже и надеюсь, что вы сможете мне помочь. Имейте в виду, что я пытаюсь сделать это на сайте Wordpress и добавляю JS с помощью плагина WPCode Lite.
Это мой JS:

Код: Выделить всё

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

Это мой CSS:

Код: Выделить всё

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

}

Я пробовал добавить переход через CSS и в js, оба не сработали

Подробнее здесь: https://stackoverflow.com/questions/784 ... -wordpress