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

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

Сообщение 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»