КАК сделать плавающую/прилипающую шапку (или меню)?

При вёрстке сайтов очень часто приходится делать шапку или блок с навигацией (меню), который при скролле остаётся в зоне видимости. Такое поведение называют по-разному: плавающая шапка, прилипающая шапка (и то же самое про другие элементы - плавающее/прилипающее меню). Иногда эта шапка изначально прибита к верхней границе экрана, а иногда бывает так, что нужный блок идёт вторым или третьим по счёту.

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

Мы рассмотрим реализацию с помощью position: sticky, а так же с помощью position: fixed. Ну и нам понадобиться немножко JavaScript. Я буду использовать jQuery, потому что на нём продемонстрировать буду проще и быстрее, но при желании это можно будет написать и на чистом JS, логика останется такой же.

=======================================

Записаться на консультацию:
https://prosto-razrabotka.ru/

Стать спонсором канала:
   / @prosto_razrabotka  

=======================================

Telegram
Канал - https://t.me/prostorazrabotka
Чат - https://t.me/prostorazrabotkachat

=======================================

Подписывайтесь в соц. сетях:
Facebook -   / vitaliy.kirenkov  
VKontakte - https://vk.com/vitaliy.kirenkov
LinkedIn -   / kirenkov  
Twitter -   / vitaliykirenkov  
Instagram -   / vitaliy.kirenkov  

=======================================

Мой второй канал:
   / @ladevega  

=======================================

   • КАК сделать плавающую/прилипающую шапку (и...  

Привет, меня зовут Виталий Киренков, и я занимаюсь веб-разработкой с 2007 года. За это время я сверстал более 200 сайтов (как минимум, половина из них с JavaScript), разработал с коллегами 2 интернет-банка на React + Redux + Typescript. И на этом канале я делюсь своим опытом в части вёрстки, javascript, и делаю всякие полезные видео для новичков и не только.
Больше информации обо мне: http://kirenkov.me/