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

Условия возникновения проблемы прыжков блока с 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.

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