При вёрстке сайтов очень часто приходится делать шапку или блок с навигацией (меню), который при скролле остаётся в зоне видимости. Такое поведение называют по-разному: плавающая шапка, прилипающая шапка (и то же самое про другие элементы - плавающее/прилипающее меню). Иногда эта шапка изначально прибита к верхней границе экрана, а иногда бывает так, что нужный блок идёт вторым или третьим по счёту.
В этом видео я покажу несколько вариантов того, как это можно реализовать, а так же, покажу какие бывают подводные камни и как их обойти.
Мы рассмотрим реализацию с помощью position: sticky, а так же с помощью position: fixed. Ну и нам понадобиться немножко JavaScript. Я буду использовать jQuery, потому что на нём продемонстрировать буду проще и быстрее, но при желании это можно будет написать и на чистом JS, логика останется такой же.
=======================================
Записаться на консультацию:
prosto-razrabotka.ru/
Стать спонсором канала:
/ @prosto_razrabotka
=======================================
Telegram
Канал - t.me/prostorazrabotka
Чат - t.me/prostorazrabotkachat
=======================================
Подписывайтесь в соц. сетях:
Facebook - / vitaliy.kirenkov
VKontakte - vitaliy.kirenkov
LinkedIn - / kirenkov
Twitter - / vitaliykirenkov
Instagram - / vitaliy.kirenkov
=======================================
Мой второй канал:
/ @ladevega
=======================================
• КАК сделать плавающую/...
Привет, меня зовут Виталий Киренков, и я занимаюсь веб-разработкой с 2007 года. За это время я сверстал более 200 сайтов (как минимум, половина из них с JavaScript), разработал с коллегами 2 интернет-банка на React + Redux + Typescript. И на этом канале я делюсь своим опытом в части вёрстки, javascript, и делаю всякие полезные видео для новичков и не только.
Больше информации обо мне: kirenkov.me/