КАК сделать плавающую/прилипающую шапку (или меню)?
HTML-код
- Опубликовано: 13 май 2020
- При вёрстке сайтов очень часто приходится делать шапку или блок с навигацией (меню), который при скролле остаётся в зоне видимости. Такое поведение называют по-разному: плавающая шапка, прилипающая шапка (и то же самое про другие элементы - плавающее/прилипающее меню). Иногда эта шапка изначально прибита к верхней границе экрана, а иногда бывает так, что нужный блок идёт вторым или третьим по счёту.
В этом видео я покажу несколько вариантов того, как это можно реализовать, а так же, покажу какие бывают подводные камни и как их обойти.
Мы рассмотрим реализацию с помощью 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/
😎 Получить исходники и другие преимущества - boosty.to/prostorazrabotka
❓ Запись на консультацию - prosto-razrabotka.ru/
✨ Telegram канал - t.me/prostorazrabotka/
🔥 Telegram чат - t.me/prostorazrabotkachat/
Можете добавиться в друзья:
📷 Instagram - instagram.com/vitaliy.kirenkov/
📘 ВКонтакте - vk.com/vitaliy.kirenkov/
📗 Facebook - facebook.com/vitaliy.kirenkov/
📙 LinkedIn - www.linkedin.com/in/kirenkov/
✏️ Twitter - twitter.com/VitaliyKirenkov/
А так же, подписаться на страницы:
📘 ВКонтакте - vk.com/public195137161/
📗 Facebook - facebook.com/prostorazrabotka/
Хорошее видео. Когда начал верстать, возникало (да и сейчас возникает) много затыков, которые не знал как разрулить чистым CSS. А на JS эти проблемы решаются легко, просто, а главное - логично и понятно. Спасибо за видео! JavaScript - это мощь и сила!
Очень полезное видео, спасибо за работу 👍 как всегда лайк!
Спасибо -)
Как вам видос?))
четкий видосик)) Классный амбиентик на фоне, так вообще лампово смотреть-) Молодец😊
Спасибо -)
Круто!
Как всегда очень к месту! Каждый видос залетает только так😉
Нормально. Только без jquery надо.
С оглядкой на крутое видео про вашу работу в IBM, случайно волей работы потребовалось поискать красивое решение, которое в вашем видео и раскрывается, в общем пасиб большое, за то, что вы образовываете и учите хорошей практике)
Очень полезные видео, обязательно буду использовать этот способ в своих проектах, огромный респект)
Благодарю -)
Отличная практика. Спасибо большое. Недавно задавался этим вопросом, как будто мысли мои прочитали))) Еще раз спасибо)
Не, мысли пока читать не умею -)
Спасибо, очень полезно. Нужно больше js!))
Большое спасибо! Очень круто объясняешь.
Спасибо
Супер как раз то что надо для начальной практики jquery пойду делать)
Успехов)
Благодарю Вас за видео.
Просто, доступно, актуально - спасибо))
Звучит как слоган -)
@@prosto_razrabotka быстро ты ответил))
гениально, спасибо!)) написала сама на JS, все отлично работает, хоть и пришлось пострадать, но куда без этого)))
const nav = document.querySelector('.nav');
const navHeight = nav.clientHeight;
const head = document.querySelector('.header');
const wr = document.querySelector('.wrapper');
window.addEventListener('scroll', () => {
if (window.scrollY > head.scrollHeight) {
wr.classList.add('navFixed');
head.style.marginBottom = navHeight + 'px';
} else if (window.scrollY < head.scrollHeight) {
wr.classList.remove('navFixed');
head.style.marginBottom = '0px';
}
});
Спасибо за полезное видео!😃
И вам спасибо за просмотр -)
Можно не приклеивать шапку (навигацию), ломая верстку, танцуя на костылях, а просто показывать/скрывать копию навигации которая вечно приклеена к топу. Но это на вкус и цвет конечно.
Спасибо,не всё понял,но концепция ясна,крут и весел как всегда!)
Так это... не стесняемся, спрашиваем чего непонятно -)
@@prosto_razrabotkaпересмотрел ,понял,принял!)
Жаль нельзя второй раз лайк поставить)
Обожаю твои видео! ❤️❤️❤️
Спасибо -)
мне такое как раз очень надо спасибо )
Не за что -)
Добрый день!
Подскажите пожалуйста не очень понимаю.
В какой тег правильнее будет обернуть элементы меню ?
То есть в html ecть теги и какой из них лучше использовать для меню в хедере и футере?
Спасибо.
спасибо!
Виталий, добрый день!
вы можете сказать марку вашего комп кресла? или что-то похожее что вам понравилось?
я хочу выбрать себе хорошее кресло, но китай массовый не хочется взять, спасибо
Это сложный вопрос и стоит подбирать под рост и вес. У меня Samurai
Классный видос про шапку, было бы круто увидеть про "умную" шапку,
которая сворачивается при сколле вниз, а при скролле вверх - показывалась.
Пример - сайт Чулакова chulakov.ru
Когда идет изменение движения, шапка замирает, нет резкого появления.
Круто! Когда нибудь будешь разбирать скрипт, при котором что-то меняется при скролле? Допустим со скроллом проходит анимация
Подумываю, но это непростая тема. Как правило подобные штуки делаются на библиотеке ScrollMagic
Лучший)
Спасибо -)
спасибо! а как сделать смену двух css файлов чтобы показать клиенту разные цветовые схемы?
Cool
спасибо
а как сделать липкий header ,если есть фоновая картинка в хедере. т,к если я ставлю какой-то цвет на header__top,то он закрашивает вверх самого фонового изображения
Зачёт бро.
Спасибо
Ставлю колокольчик!
Красава! -)
Можно просто смело зафиксировать хедер и задать отступ для контента на высоту хедера. Если надо как-то аниммировать, то можно при прокрутке проверять ее величину и делать какие-то действия. Если пытаться выдирать хедер из потока, то полезет всякая фигня продемонстрированная в видео.
Если надо чтоб хедер исчезал но появлялся по определенных движениях, то делать его надо абсолютом, потом фиксировать и красиво выдвигать.
Привет, если верхняя шапка с лого, поиском и навигационная горизонтальное меню (кнопки) тоже такой же принцип?
надо логотип и поиск отдельно зафиксировать и отдельно навигационное меню прилипнуть к шапке?
Я тут показал сам принцип работы. Содержимое же уникально для каждого сайта. Например шапка может сразу включать в себя навигацию...
Суть в том, что вы получаете класс (информацию о том, что Точка прилипания достигнута), а дальше уже отталкиваясь от класса стилизуете то, что прилипло.
@@prosto_razrabotka
я понял, уже попробовал, все норм. спасибо за подсказку
Отлично
Можно разобрать скрол а-ля вертикальный слайдер? При скроле меняются блоки сайта.
alvarotrigo.com/fullPage/ru/#page1
Это?
@@prosto_razrabotka да, он самый)
есть кокой-то канал, который в подобном стиле преподаёт java?
интересно посмотреть реализацию плавающего сайдбара, не наезжающего на контентную часть при горизонтальном скроле
Горизонтальном?! Точно? Может всё же вертикальном?
@@prosto_razrabotka ну при вертикальном само собой должен ездить, но если свернуть окно браузера, появляется горизонтальный скрол и если скролить по горизонтали начинается самое интересное). Да, если еще сайдбар слева
Привет,спасибо за видео.А как сделать прилипающий к низу подвал(чтоб независимо от размера документа он был всегда в самом низу)?Спасибо большое заранее автору за ответ, он мне очень нужен.
ruclips.net/video/fK70h0CXNsU/видео.html
Тут, как раз делается такой подвал
Для создайте class="main" и в CSS для .main { flex-grow: 1;} Всё, футер прибит.
Годнота, больше ничего не скажешь ;)
А больше и не надо -)
Для саморазвития ето конечно плюс но не проще position: fixed;
чет у меня не заработало, undefind для первого значения, пришлось делать через пиксели
Первый лайк 😎😎😎😎
Благодарю -)
Первый😎😎😎
Еее!!))
@@prosto_razrabotka люблю твой контент
Ошибка: оffset is not a function. Что с ней делать?
Исправить
Я сегодня видел очень короткий вариант на чистом css
А, тут сказали о нем
Зачем загрязнять код и делать лишний контейнер в nav, если при фиксировании можно было просто задать центрирование для самого nav? Да и в случае с шапкой проще фиксировать и центрировать сам header чем плодить ненужный код
не знал про sticky, всегда писал через js
даже ютуб скоро уже не будет поддерживать IE, кому он нужен?
Сайтам типа одноклассников нужен
3й
Точно?)
Смеюсь с превью как ненормальный, теперь всегда когда буду говорить о шапке перед глазами будет эта картинка
Хаха -))
Хейтерам jQuery посвящается. Использовал и буду использовать jQuery толоко ради того чтобы позлить этих людей, хы))
Зачем 🤦♂️
ой а кто это на xhtml пишет в 2020?
Я ни чего не понял....Да и фиг с ним...Я вообще мало что понимаю)
через жопу к звёздам
Видео обман! В описании шапка, а на видео - шляпа!
Кажись наоборот, не?)