Скройте верхнюю часть панели навигации при прокрутке (плавно!) - PullRequest
Новая
       16

Скройте верхнюю часть панели навигации при прокрутке (плавно!)

1 голос
/ 17 апреля 2020

Здравствуйте, я настроил Bootstrap панель навигации с 2 рядами (верхняя часть просто lo go, а социальные ссылки и нижняя часть - навигационные ссылки). Я пытаюсь скрыть верхнюю часть при прокрутке, но не могу найти способ сделать это плавно. Я думаю, что приведенный ниже код является лучшим решением, которое я нашел, но на данный момент EventListener на transitionend не работает, и класс 'hidden' никогда не добавляется. 

var scrollpos = window.scrollY;
var header = document.getElementById("header-up-section");

function add_class_on_scroll() {
    header.classList.add('visuallyhidden');
    header.addEventListener('transitionend', function(e) {
      header.classList.add('hidden');
    }, {
      capture: false,
      once: true,
      passive: false
    });
}

function remove_class_on_scroll() {
     header.classList.remove('hidden');
    setTimeout(function () {
      header.classList.remove('visuallyhidden');
    }, 20);
}

window.addEventListener('scroll', function(){

    scrollpos = window.scrollY;

    if(scrollpos > 20){
        add_class_on_scroll();
    }
    else {
        remove_class_on_scroll();
    }
    console.log(scrollpos);
});

*/and CSS :

#header-up-section.visuallyhidden {
  opacity: 0;
}

#header-up-section.hidden {
  display: none !important;
}

Раздел заголовка вверх становится невидимым но div не скрыт. Любая идея, чтобы помочь?

...