Условия возникновения проблемы прыжков блока с 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.
Готовое решение рабочей фиксации блока при скролле страницы можно найти в ЭТОЙ СТАТЬЕ.