1

Добрый день, сообщество. На сайте https://oblakavape.com.ua/ при скролле вниз происходит "неуклюжий" прыжок меню, сразу после добавления класса .fixed к блоку навигации. Как можно исправить данную проблему? Решение с клонированием меню сюда не подойдет. Прикладываю js код, который отвечает за фиксированную навигацию.

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 30) {
        $('.navigation').addClass('fixed');
    } else {
        $('.navigation').removeClass('fixed');
    }
});

1 ответ 1

1

Скачет не меню, а контент под блоком. При добавлении к меню position: fixed, меню выходит из блочной модели, ровно также, как и при position: absolute. Предлагаю такой выход: обернуть весь контент, который идет после меню, в отдельный блок, а затем добавлять padding при скролле. css:

.body_scroll {
  padding-top: *высота меню*;
}

JS:

$(window).bind('scroll', function () {
if ($(window).scrollTop() > 30) {
    $('.navigation').addClass('fixed');
    $(*селектор блока-обертки*).addClass('body_scroll');
} else {
    $('.navigation').removeClass('fixed');
    $(*селектор блока-обертки*).removeClass('body_scroll');
}
});
1
  • Спасибо большое! Подумывал о подобном решении.
    – slackdak
    11 июл 2017 в 17:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.