Как отменить действие класса navbar-fixed-top на мобильном разрешении?

Question

#navbarlol {
    z-index: 9999;
    position: fixed;
    width: 100%;
    display: block;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#navbarlol a {
    display: block;
}


var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;

    if (prevScrollpos > currentScrollPos) {
        document.getElementById("navbarlol").style.top = "0px";
    } else {
        document.getElementById("navbarlol").style.top = "-45px";
    }

    prevScrollpos = currentScrollPos;
}

и ещё может подскажите по скрипту после перезагрузки когда начинаешь скролить резко скачок в верх на 45 пикселей, а как сделать скачок в плавное действие?

Answer 1

Есть метод такой

domElement.scrollBy({
 top: 0, // сколл по вертикали
 left: offset, // сколл по горизонтали
 behavior: 'smooth' // это говорит о том, что надо скролить плавно
});

Попробуй. Может оно? А про первый вопрос не очень понятно. Вроде это медиазапросами решается.

Answer 2

ответ дан отталкиваясь от дискуссии в комментариях:

поведение класса navbar-fixed-top

всё, что касается стилей (как будет вести себя класс, учитывая размер экрана) - решаться должно в стилях с помощью медиа запросов. то есть, не обязательно удалять класс navbar-fixed-top, если размер устройства меньше 991px.

если с медиа запросами проблемы, то удаляйте класс navbar-fixed-top при загрузке страницы. например, так:

document.addEventListener('load', () => {
    if (window.innerWidth < 991) {
        document.querySelector('navbar').classList.remove('navbar-fixed-top');
    }
});

но учтите, что при изменении ширины экрана, класс сам не вернется, по-этому нужно это учесть и добавить событие resize.

так же обратите внимание, что Ваше событие window.onscroll будет работать всегда, а для десктопной версии Вам это не нужно. при загрузке страницы нужно (!) учесть этот момент. например:

document.addEventListener('load', () => {
    if (window.innerWidth < 991) {
        window.onscroll = function() {
            .... //Ваш код по скрытию/появлению блока navbar

как сделать плавное скрытие/появление #navbarlol

добавить блоку #navbarlol стиль transition: top 1s;

несколько замечаний

учтите, что если Вы навешиваете обработчики событий как свойство (window.onscroll и т.д), то таким образом Вы можете вешать только по одному виду событий на элемент. например, следующий window.onscroll перепишет предыдущий window.onscroll. используйте как альтернативу addEventListener.

БЛОГ НА HUSL

Как отменить действие класса navbar-fixed-top на мобильном разрешении?

Ответы (2 шт):