Липкая навигация

Демо можно найти здесь.

Чему я научился на этом мини-проекте.

положение: фиксированное

Основная цель этого проекта состояла в том, чтобы узнать об эффектах изменения положения элементов на fixed.

При применении этого свойства элемент по существу удаляется из DOM, что освобождает пространство, которое он ранее занимал в нем.

Это вызывает перетасовку для других элементов, что может вызвать дрожание, когда положение элементов изменяется на фиксированное.

Один из способов решения этой проблемы — заполнить освободившееся пространство, добавив padding. Это можно сделать несколькими способами, но имеет смысл сделать это значение динамическим, чтобы оно адаптировалось при изменении макета страницы.

Первоначально опубликовано на gist.github.com.