JS-решения №15. Фиксированная шапка при скролле вниз и вверх

preview_player
Показать описание
Привет! В новой части JS-решений я покажу, как сделать фиксированную шапку сайта при скролле вверх и вниз. Поехали!

Содержание:
00:00 - Интро
00:20 - HTML/CSS
02:32 - Скрипт по скроллу вниз
08:00 - Скрипт по скроллу вверх
11:42 - Аутро

Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.


#ityoutubersru #скролл #фиксированнаяшапка
  1. MaxGraph - cайты как страсть
  2. верстка
  3. верстка сайта
  4. верстка сайта с нуля
  5. верстка с нуля
  6. адаптивная верстка
Рекомендации по теме
JS-решения №15. Фиксированная 0:12:20

JS-решения №15. Фиксированная шапка при скролле вниз и вверх...

Фиксируем шапку при 0:05:51

Фиксируем шапку при прокрутке сайта Javascript | Урок 12

Фиксированная шапка сайта. 0:23:32

Фиксированная шапка сайта. HTML+CSS+JS

Как зафиксировать шапку 0:03:16

Как зафиксировать шапку сайта при скролле с помощью CSS

JS-решения №7. Убираем 0:08:28

JS-решения №7. Убираем прыжок при открытии окна

димастратция влияния радиации 0:00:15

димастратция влияния радиации на тень

КАК сделать прилипающую/скрывающуюся 0:04:14

КАК сделать прилипающую/скрывающуюся навигацию (шапку) - JS, Css...

Царица ANNA ASTI 0:00:14

Царица ANNA ASTI #tiktok #тренды #shorts

JS-решения №5. Активный 0:06:28

JS-решения №5. Активный класс в меню при скролле

Появление элементов при 0:04:12

Появление элементов при скролле - Проще простого!

JS-решения №12. Базовая 0:24:19

JS-решения №12. Базовая анимация при скролле на чистом JS

JavaScript Практика - 0:06:16

JavaScript Практика - EVENT scroller - Скролим вниз исчезает шапка, как только скролим вверх она...

Как сделать фиксированную 0:05:30

Как сделать фиксированную шапку сайта в свободной секции...

JS fixed menu 0:21:06

JS fixed menu on scroll - фиксированное меню при прокрутке Js + css

Можно ли объединить 0:01:26

Можно ли объединить шапку и меню, чтобы закрепить в верху сайта...

КАК сделать плавающий 0:25:36

КАК сделать плавающий блок сбоку?

Как закрепить меню 0:00:32

Как закрепить меню в верхней части сайта

Исправляем баги бургера, 0:48:30

Исправляем баги бургера, создаём шапку sticky и анимированную кнопка scroll to | HTML, CSS, JS...

Fixed Header | 0:08:25

Fixed Header | CSS + JS | Фиксированное меню

Анимация шапки сайта 0:00:15

Анимация шапки сайта

Показать / скрыть 0:10:29

Показать / скрыть хедер при прокрутке вверх и вниз на JS | Vimp dev...

Проблема скрола в 0:00:38

Проблема скрола в папках.

FIXED Header while 0:04:26

FIXED Header while Scroll / Javascript Tutorial

Web-заметки №4. 'Липкое' 0:09:13

Web-заметки №4. 'Липкое' позиционирование с position: sticky...

Комментарии
Автор

Отлично видео, редко касаются тем которые действительно затрудняют начинающих.Спасибо за полезную и важную информацию.

yusif
Автор

Круто, и теперь браузер будет вызывать функцию на каждое событие скрола, что очень бьет по производительности.

Sergey_Klimov
Автор

Очень интересные видео и частенько что-то беру из них! Но есть пару просьб, пожеланий.
1. Лучше бы в самом начале видео показать то, что вы будете делать)
2. Когда получается какая-то ошибка в коде и вы начинаете исправлять, то за этим не всегда хочется смотреть) было бы здорово, если бы в похожих видео было все четко)

Ну и побольше бы такой рубрики!
Спасибо)

hmutyikoot
Автор

Спасибо!
Макс, а в плейлисте UI-компоненты не появится видео по фильтрам (много фильтров) товаров!?

kgfztzb
Автор

Можно более распространёный вариант, когда сверху меню соц, а ниже ее сама шапка, и при скроле что бы осталась толька шапка?

sergeykostik
Автор

Максим, спасибо за видео! Скажите, что делать когда футер прижат к низу через флекс html, body, wrapper - 100%, scroll не работает? Как исправить что бы при 100% он заработал

xyvmrvr
Автор

Макс, привет, я новичок. Скажи, пожалуйста, насколько актуально сегодня весь код js писать в обработчике по событию DOMContentLoaded или их аналогах? Раньше всё писали в jQuery функции ready(). Насколько актуально сегодня так делать?

deniskotov
Автор

привет, скрывать на скрол вниз шапку будем? и показывать при скроле вверх?

sypfrte
Автор

Привет. Есть вопрос по коду. Это начинает срабатывать при скролле, а как быть если при обновлений страницы? Вот я дошёл до середины, обновил страницу, и шапка не появится пока не будет скролла, как можно доработать это место?

NivaiZRUS
Автор

Как сделать так, чтобы хедер при скролле вверх не сразу появлялся, а только через заданное количество прокрученных пикселей?

aaffbdefdfab
Автор

position: sticky? Не, не слышали
Да?)

danielkhachaturian