Тёмный

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

ВЕРСТАЧ
Подписаться 12 тыс.
Просмотров 25 тыс.
50% 1

В этом видео мы рассмотрим 2 способа фиксирования шапки сайта с помощью стилей postion: fixed и position: sticky.
В первом варианте мы просто зафиксируем шапку сайта, а со вторым вариантом мы сделаем шапку прилипающей к верхней области браузера, когда она достигает нужного нам элемента.
Буду рад любым пожертвованиям;
Тинькофф - 5536 9137 6324 5442
Сбербанк - 5469 6200 1922 8210
QIWI - 4890 4947 4726 5197
Если у тебя появились вопросы - обязательно задавай их под видео и я моментально тебе отвечу.
Желаю хорошего просмотра!
Связаться со мной можно по следующим контактам:
verstach
t.me/beleckyweb
/ belecky_web

Опубликовано:

 

24 дек 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 54   
@yulik_Lv
@yulik_Lv Год назад
Спасибо большое, а главное быстро и по делу. Аж не привычно что все с 1 раза работает)
@bosskez564
@bosskez564 2 года назад
Наконец то нашёл как этот подвал зафиксировать. Очень понятно и просто.
@user-ye2mm6ov6li
@user-ye2mm6ov6li 2 года назад
Спасибо! Четко и лаконично. Без воды
@verstach
@verstach Год назад
Во благо)
@user-gy5lg4vp9i
@user-gy5lg4vp9i Год назад
Спасибо, братишка. postition: sticky - это прям то, что мне нужно было. Хотел уже через js костыли лепить... Лайк
@ducciofrederic6926
@ducciofrederic6926 Год назад
Спасибо, выручил очень!))
@user-er3ux5wf6d
@user-er3ux5wf6d 2 года назад
ясно, быстро и по делу)) спасибо
@m.kaufman
@m.kaufman Год назад
Ты просто лучший, от души
@llove9473
@llove9473 2 года назад
лайк за последние 15 секунд видео, нашел что искал
@FrankyyBalboa
@FrankyyBalboa 2 года назад
Помог решить проблему шапки. Зачёт! Спсб.
@verstach
@verstach 2 года назад
Рад помочь)
@ilyaastafyev
@ilyaastafyev Год назад
при первом методе начинает шапка влево слетать. Автор , подскажите если знаете в чем дело второй работает
@DevNickKg
@DevNickKg Год назад
Без воды кратко объяснил
@verstach
@verstach Год назад
Во благо)
@user-hm2di5yf8f
@user-hm2di5yf8f Год назад
Спасибо, огромное!
@verstach
@verstach Год назад
Во благо) Рекомендую также посмотреть новый выпуск урока по интеграции сайта на WordPress - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Q5zcWpRMl9s.html
@Ismail-ni7st
@Ismail-ni7st Год назад
Спасибо большое, position: stacky - это то, что надо, но модальные окна перестали работать
@verstach
@verstach Год назад
Если на модальные окна накидываете этот стиль, вероятно у них уже была ранее задана позиция (position fixed или absolute), поэтому стики будет перебивать старый стиль и ломать позиционирование
@locky1827
@locky1827 Год назад
круто
@user-jg3iq5nk6c
@user-jg3iq5nk6c Год назад
Спасиб помог
@ALXTS
@ALXTS 3 года назад
Спасибо чел помог
@verstach
@verstach 3 года назад
Рад помог!;)
@Alim0408
@Alim0408 10 месяцев назад
спасибо большое
@slava_zxz
@slava_zxz 2 месяца назад
у меня на fixed слетает margin: auto и становится хедер не по середине, а стики работает
@user-or1hy4xz8u
@user-or1hy4xz8u Год назад
Хорошо бы ссылочку на готовый код прикреплять
@Eltar007
@Eltar007 Год назад
Хотел бы шапку таблицы закрепить. "Накинул" на строку tr position: fixed; и никакого эффекта не получил... Что бы это могло быть?
@user-vt1od4do5i
@user-vt1od4do5i 3 года назад
Всё легко и понятно даже новичку. А как сделать так, чтобы фиксированная шапка исчезала при прокрутке вниз и появлялась, когда прокрутить на начало страницы? Мне для одной анимации нужна фиксированная шапка. Но при скроле шапка наезжает на текст и это выглядит ужасно. Как быть в такой ситуации? Фон у шапки должен быть прозрачным. И была идея либо шапку убирать при скролле либо как-то убирать текст.
@verstach
@verstach 3 года назад
Можно также на jquery сделать. Учту в будущих уроках
@user-js7lf6vb9n
@user-js7lf6vb9n 2 года назад
Когда первый раз применила position: sticky к элементу, свойство не сработало. Столкнулся с такой же проблемой. Как все таки сделать, чтоб сработало?
@verstach
@verstach 2 года назад
Просто элемент sticky не должен иметь родительского блока (position relative)
@Tim_Mufey
@Tim_Mufey Год назад
А, если шапка изменяет свою высоту при изменении ширины экрана, то как сделать так, чтобы нижняя часть автоматически следовала за шапкой? Иными словами - в шапке находятся пункты меню, которые могут иногда переноситься на другую строку. Поэтому, высота шапки заранее неизвестна. Фиксированный margin здесь явно не подходит.
@lemontea330
@lemontea330 5 месяцев назад
Нашелся ответ на этот вопрос?
@r.tertychnyi6121
@r.tertychnyi6121 3 года назад
почему на act_box не сработало?
@emilmuhtarov6613
@emilmuhtarov6613 2 года назад
А как сделать так что бы футер был привязан к низу страницы и вместе скролилась?
@verstach
@verstach 2 года назад
Точно так же, как и в видео. Только там, где мы указываем стили: position: fixed;top:0, нужно вместо top:0 - добавить стиль bottom:0
@xPyc9x
@xPyc9x 3 года назад
Как сделать так чтобы при скролле бг хэдр был белым, а в самом хэдре бг был прозрачным? С помощью js или через css тоже можно?
@verstach
@verstach 3 года назад
С помощью js при скроле вниз можно добавлять какой-нибудь класс на хэдер. Например, при скроле вниз на 100px элементу header назначается класс active. А в стилях создаёшь селектор header.active {} и задаёшь ему background: #fff.
@verstach
@verstach 3 года назад
Пример на jQuery: $(window).scroll(function(){ if ($(window).scrollTop() > 100) { $('.class1').addClass('class2'); } else { $('.class1').removeClass('class2'); } }); Тут говориться о том, что при скроле на 100px от верхней части сайта, элементу с классом .class1 будет присваиваться класс "class2". Ниже в продолжении скрипта, после else, говориться о том, что если положение окна не уходит за пределы 100px, то у .class1 удаляется class2
@verstach
@verstach 3 года назад
Т.е., к примеру, если у тебя фиксированный "header", пишешь вот такой скрипт: $(window).scroll(function(){ if ($(window).scrollTop() > 100) { $('header').addClass('active'); } else { $('header').removeClass('active'); } }); А потом добавляешь какой-нибудь подобный селектор в таблицу стилей: header.active { backgorund-color: #fff; }
@xPyc9x
@xPyc9x 3 года назад
@@verstach огромное спасибо за то что уделил время чтобы ответить и спасибо за пример👍🏿🤘🏿🖤☻
@verstach
@verstach 3 года назад
@@xPyc9x всегда рад ;)
@Jerald6940
@Jerald6940 6 месяцев назад
А как сделать что бы шапка сайта становилась прозрачной при скроле?
@evgeniy3370
@evgeniy3370 2 года назад
Жаль нельзя сделать без JS чтобы при прокрутке ещё и фон менялся у шапки
@DIMANVAZ04
@DIMANVAZ04 2 года назад
при фиксед шапке, контент ниже оказывается частично перекрытым шапкой. Как убрать это?
@verstach
@verstach 2 года назад
Свойство margin-top на высоту следующего после шапки элемента
@Cycle329
@Cycle329 3 года назад
А что делать если stiky остонавливается на блоке и не скролица дальше ?
@verstach
@verstach 3 года назад
Нужно накинуть на главный родительский блок
@Cycle329
@Cycle329 3 года назад
@@verstach он у меня стоит на родительском блоке
@verstach
@verstach 3 года назад
@@Cycle329 заверни в codeopen и отправь ссылку
@Cycle329
@Cycle329 3 года назад
@@verstach да спасибо но я решил сам проблему, у меня в боди была прописана максимальная высота из-за которой стики не хотел работать
@verstach
@verstach 3 года назад
@@Cycle329 рад, что всё получилось)
@KRASAVCHIK
@KRASAVCHIK Год назад
Так это ты в браузере сделал. Обнови страницу и все исчезнет!
@verstach
@verstach Год назад
А вы внесите в файл стилей и не исчезнет
@verstach
@verstach 2 года назад
Бесплатный хостинг и купон на 30% для всех подписчиков! В честь открытия компании хостинг-провайдера - предоставляю всем подписчикам возможность протестировать хостинг на 7 дней абсолютно бесплатно. В довес к этому ты получишь индивидуальную скидку на 30% для оплаты любой услуги на любой срок! Чтобы получить подарок - свяжись со мной по любым контактам из под видео. Так, а что за хостинг? - Высокоскоростной хостинг на NVMe дисках; - Защита от DDoS-атак и спама - "DDoS-GUARD"; - Ежедневные автоматические бэкапы сайтов; - Бесплатный SSL-сертификат для каждого домена (https); - Самая функциональная панель управления хостингом ISP Manager; - Поддержка PHP, MySQL, Perl, Python и всех популярных CMS; - Трафик, БД, FTP, домены - без ограничений на всех тарифах; - Домен .ru или .рф в подарок при заказе хостинга на год; - Оперативнейшая техническая поддержка и помощь в решении трудностей; - Возможность переноса сайтов и баланса с другого хостинга; и многое-многое другое! В команде разработчиков и технической поддержки - настоящие специалисты с широким стеком и опытом работы! Помогут с решением любых трудностей в максимально короткие сроки. Ссылка на хостинг: www.leadhost.ru/
Далее
МАЛОЙ И РЕЧКА
00:36
Просмотров 296 тыс.
Настройка VS Code для верстки
34:27
Просмотров 300 тыс.
How to fix the menu on the site.
7:04
Просмотров 10 тыс.
Выпадающее меню на css
13:27
Просмотров 206 тыс.