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

При вёрстке сайтов очень часто приходится делать шапку или блок с навигацией (меню), который при скролле остаётся в зоне видимости. Такое поведение называют по-разному: плавающая шапка, прилипающая шапка (и то же самое про другие элементы - плавающее/прилипающее меню). Иногда эта шапка изначально прибита к верхней границе экрана, а иногда бывает так, что нужный блок идёт вторым или третьим по счёту. В этом видео я покажу несколько вариантов того, как это можно реализовать, а так же, покажу какие бывают подводные камни и как их обойти. Мы рассмотрим реализацию с помощью position: sticky, а так же с помощью position: fixed. Ну и нам понадобиться немножко JavaScript. Я буду использовать jQuery, потому что на нём продемонстрировать буду проще и быстрее, но при желании это можно будет написать и на чистом JS, логика останется такой же. ======================================= Записаться на консультацию: Стать спонсором канала:
Back to Top