GRAVITSAPA.INFO

Компьютеры, электроника, софт, авто, мото, вело, сайты, жизнь, советы :)

GRAVITSAPA.info - интересный блог

Блок прыгает во время скролла с добавлением position: fixed — исправляем проблему

456 просмотров Создание сайтов Нет комментов » 17 Янв 2019

Условия возникновения проблемы прыжков блока с position: fixed:

  • Есть меню, которое при скролле должно прилипать к верху экрана
    <nav>
    <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
    </ul>
    </nav>
  • Есть скрипт JQuery, который определяет позицию меню nav во время скролла и добавляет класс со стилем position: fixed

Проблема заключается в том, что во время скролла когда блок достигает нужной позиции для получения нового класса со стилем position: fixed, класс начинает непрерывно сбрасываться. Визуально это выглядит как прыжки блока.

Скажу сразу, если скрипт корректно определяет позицию и в нужный момент добавляет класс, значит работает правильно и дело не в нём. Будем копать в сторону стилей CSS и HTML верстки блока, который нужно фиксировать. Итак решение проблемы прыжков блока при фиксации:

  • Модернизируем меню, приведённое в качестве примера фиксированного блока во время скролла — добавляем внутри div блок:
    <nav>
    <div class="nav-menu">
    <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
    </ul>
    </div>
    </nav>
  • Скрипт переопределяем на добавление класса div блоку .nav-menu, а не общему блоку nav
  • Блоку nav задаём высоту с помощью стиля height. Блоку nav-menu задаём такую же самую высоту и стиль line-height с значением как и у height.

Готовое решение рабочей фиксации блока при скролле страницы можно найти в ЭТОЙ СТАТЬЕ.

Оставь свой коммент

Наверх