Слева логотип, название сайта и его описание, а справа контактные телефоны, кнопка обратного звонка и кнопка меню. Типичная разметка для многих сайтов.
Дабавим немного стилей и получим такой внешний вид.
Пока, тут нет никаких особенностей. Это обычная шапка без дополнительных эффектов.
Исходник для изучения разметки, стилей и кода, как обычно, в конце статьи.
Теперь давайте подключим перед закрывающим тегом «body» jQuery и скрипт, в котором и будем писать js-код для управления состоянием и положением шапки.
Итак, давайте начнем с простейшего, добьемся того, чтобы шапка принимала статическое положение и перекрывала контент, который должен находится под ней.
Чтобы это сделать, у нас есть несколько подходов. Первый заключается в том, чтобы при прокрутке добавить шапке определенный класс, с новыми стилями, а второй в том, чтобы добавлять и удалять их прямо в js. Я считаю, что основные манипуляции с CSS нужно делать в таблице стилей, поэтому пойду первым путем, но для этого нужно показать стили шапки, которые я задал, чтобы вы лучше понимали, что происходит. Вот они.
.header < width: 100%; background: #fff; padding: 15px 0; z-index: 100; -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15); box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15); >.header__inner
Так выглядят стили для обертки шапки и блок с ее содержимым. За счет такой структуры мы легко сделаем шапку фиксированной, а ее содержимое продолжит оставаться в центре на любом устройстве.
Как я уже говорил, для того чтобы «header» стал фиксированным при прокрутке, ему нужно поменять позиционирование на «fixed». Для этого, при помощи метода «scrollTop()» мы проверим значение прокрутки в окне браузера и в нужный момент добавим шапке класс, в котором и изменим позиционирование.
Звучит страшнее чем кажется. На самом деле все достаточно просто. Давайте в таблицу стилей добавим класс, при помощи которого шапка будет получать position: fixed.
.header_fixed
Обратите внимание, что z-index для того, чтобы при позиционировании шапка была над остальными элементами, я задал непосредственно классу header немного ранее.
Теперь давайте перейдем к написанию скрипта. Открывайте файл scripts.js и добавьте следующий код.
$(function() < let header = $('.header'); $(window).scroll(function() < if($(this).scrollTop() >1) < header.addClass('header_fixed'); >else < header.removeClass('header_fixed'); >>); >);
Здесь мы создаем переменную header и присваиваем ей наш элемент, в котором расположена шапка, чтобы было легче и удобнее им манипулировать. Затем пишем функцию, которая следит за прокруткой, и если мы прокрутили больше чем на 1 пиксели от начала окна браузера, то элементу с классом header добавляем недавно созданный класс «header_fixed», который и фиксирует шапку в верхней области экрана.
Начало положено. Теперь шапка при прокрутке ведет себя так, как нам нужно было и успешно фиксируется. Но мне не нравится рывок, который заметен, когда мы меняем позиционирование. Попробуйте покрутить.
Давайте исправим это. Происходи такое резкое смещение из-за того, что шапка занимала 90 пикселей и, соответственно, смещала контент вниз на 90 писклей, а когда мы прокрутили, мы вырвали из общего потока этот элемент и все сдвигается на его высоту. Чтобы этого избежать, предлагаю body, во время того, как шапка становиться фиксированной, дать отступ в 90 пикселей, которые мы теряем. Только я не буду топорно зашивать эту высоту в скрипт, а автоматический вычислю ее высоту и буду использовать это значение в вычислениях.
Опять же звучит страшно и заумно, но посмотрите, как все просто.
$(function() < let header = $('.header'); let hederHeight = header.height(); // вычисляем высоту шапки $(window).scroll(function() < if($(this).scrollTop() >1) < header.addClass('header_fixed'); $('body').css(< 'paddingTop': hederHeight+'px' // делаем отступ у body, равный высоте шапки >); > else < header.removeClass('header_fixed'); $('body').css(< 'paddingTop': 0 // удаляю отступ у body, равный высоте шапки >) > >); >);
В 3 строке я получаю число с высотой шапки. На 8 строке, добавлю отступ тегу body, равный высоте шапки, чтобы скомпенсировать ее, в тот момент, когда мы вырываем из общего потока шапку и минеям ей позиционирование.
Когда прокручиваем страницу обратно, и скрипт удаляет класс header_fixed, я также удалю и, теперь, лишний отступ у тега body.
Надеюсь, понятно объяснил и теперь у вас нет никакого рывка, при скролле, а шапка плавно фиксируется и позиционируется в верхней области экрана.
Изменение высоты шапки и цвета
Теперь давайте разбираться, как при прокрутке изменить высоту шапки. Это достаточно популярный эффект, о котором вы меня часто спрашивали.
Наверное, вы догадались уже, что никакой магии тут нет и делается все аналогично тому, как мы уже это проделали выше. Просто выбираем расстояние от верхней точки окна браузера, на котором должен произойти тот или иной эффект и добавляем или удалим класс, отвечающий за этот эффект.
Но давайте на этот раз я не буду задавать отдельный класс, а покажу как изменить стили прямо в js. Итак, задача при прокрутке на 300 пикселей при помощи jQuery плавно изменить высоту шапки и ее цвет.
if($(this).scrollTop() > 300) < header.css(< 'padding': '5px 0', 'background': '#f6ffdb', 'transition': '.3s' >); > else < header.css(< 'padding': '15px 0', 'background': '#ffffff', 'transition': '.3s' >); >
Как видите, благодаря методу «.css» можно манипулировать стилями прямо из jQuery. Отступ был по 15 пикселей сверху и снизу, а я заменил его на 5, за счет чего шапка стала меньше на 20 пикселей. Цвет сделал бледно желтым, а при помощи свойства transition сделал эффект перехода из одного состояния в другое более плавным.
Как удалить/скрыть элемент из шапки при прокрутке страницы
Этот вопрос мне также периодически задавали в соцсетях, поэтому решил вынести его в отдельный пункт. Наверняка вы уже догадались, если дочитали статью до этого момента. Ничего нового, увы, тут не будет. Все также, как выше. Получим id или class элемента и добавим ему свойства для скрытия. Например «display: none» в простейшем случае.
Для примера давайте скроем один из номеров телефонов. Это будет сложнее, так как у обоих номеров одинаковый класс. Напомню, блок с контактами у меня выглядит так:
+38(095) 126-73-33 Мобильный
+38(095) 126-72-32 Многоканальный
Теперь давайте в js напишем код, отвечающий за скрытие одного из номеров. Пусть это событие случается, когда мы прокрутили окно на 500 пикселей, но давайте, чтобы не повторятся, будем не просто стили менять или классом манипулировать, а воспользуемся методами fadeIn|fadeOut для плавного скрытия и появления элемента.
let mobileTel = $(‘.header__tel’).first(); // сохранем в переменную первый элемент с классом header__tel if($(this).scrollTop() > 500) < mobileTel.fadeOut(); >else
Вот, что мы получили:
Вот такой, достаточно простой эфеект получился. Надеюсь, все основные нюансы по закреплению шапки учел. Если будут еще какие-то вопросы, задавайте в комментариях.
Как закрепить header при скролле css
Элемент с position: sticky; фиксируется в рамках ближайшего родителя, когда расстояние до границы ближайшего прокручиваемого родителя достигает указанного в свойствах top , right , bottom , left значения. На то, в каком месте элемент прикрепится и где отцепиться, также влияют свойства padding , margin и transform . Размещение элемента над другими элементами правится с помощью свойства z-index .
После того, как свойство position примет значение sticky , размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.
Фиксируем шапку сайта при прокрутке страницы.
Допустим у вас важная информация например контакты находятся в шапке и вы хотите что бы они всегда были на веду у клиента или просто хотите что основная навигация всегда была под рукой.
То можно просто зафиксировать шапку сайта что бы при прокрутке она всегда была на одном месте при прокрутке страницы. Для того что бы это реализовать нам понадобится немного подправить стили (CSS).
И теперь добавим необходимые стили:
Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.
Скрываем/показываем Header при прокрутке
Логика простая — если текущее значение прокрутки страницы больше чем предыдущее, значит прокрутка осуществляеся вниз, а при прокрутке вниз добавляем блоку .header класс header_hidden , который скрывает его. Если текущее значение прокрутки меньше предыдущего, значит прокручиваем страницу вверх, и у блока .header удаляем класс header_hidden , который его скрывал
Вместе с направлением прокрутки проверяем, имеет ли .header класс header_hidden , чтобы не запускать добавление/удаление класса header_hidden при каждом событии прокрутки в одном направлении
Тот же самый скрипт на чистом JavaScript
Ниже тот же скрипт, но на чистом JavaScript (ES6) c комментариями. Логика аналогична
Итоги
Данный приём полезен также и для мобильной верстки — при прокрутке вниз, Header не мешает просмотру контента, и контент занимает все окно браузера, а при малейшей прокрутке вверх, Header отображается и готов к взаимодействию, без необходимости прокручивать страницу к самому началу
Дополнительно рассмотрели разницу скриптов при использовании библиотеки jQuery и без неё — на чистом JavaScript в современном стандарте ES6
Три варианта фиксации элемента на сайте на CSS/jQuery
Фиксирование элементов сейчас пользуется большой популярностью. Так, например, «Яндекс» или социальная сеть «ВКонтакте» (на момент написания статьи) фиксируют свое меню и поиск при прокрутке страницы. Вполне хорошее решение, позволяющее ограничить пользователя от лишних действий в получении доступа к нужному функционалу сайта и позволяющее сделать некий акцент на важных элементах.
Зафиксировать элемент на сайте можно несколькими способами, каждый из них хорош в своем случае.
Фиксация элемента на сайте на CSS
Самый простой вариант – это фиксация элемента на чистом CSS. Все, что вам нужно, это добавить следующие стили к элементу:
Положение в таком случае будет верхнее, по всей ширине экрана. Вариант отлично подходит для элементов, которые изначально находятся в самом верху (меню и поиск).
Если хотите поиграть с положением – измените значение свойств left, top, right и bottom соответственно.
Минусы – не подходит для элементов, находящихся ниже верхней границы сайта.
Здесь на помощь к нам приходит другое значение position – sticky. Оно фиксирует тот или иной элемент только в рамках первого родительского контейнера. Фиксация элемента при этом начнется тогда, когда верхняя граница элемента совпадет с верхней частью окна браузера, и завершится при достижении элементом конца родителя, при этом другие элементы (и даже окружаемый текст) не смещаются, что очень удобно в отдельно взятых случаях. Пример использования:
Эти стили вы присваиваете тому элементу, который хотите зафиксировать. Свойство top со значением «10px» говорит здесь о том, что при фиксации элемента необходимо сделать отступ от верхней границы в 10 пикселей.
Фиксация элемента на сайте при прокрутке страницы на jQuery
Этот вариант, в отличие от первого, фиксирует нужный вам элемент только тогда, когда его положение равняется верхней границе вашего экрана при прокрутке страницы.
«.fixed_block» здесь – это класс элемента, который нужно зафиксировать при прокрутке, а «.fixed_block_position» — класс обертки.
Их вы вставляете без изменений. Отличный вариант для фиксации рекламных блоков или других элементов находящихся не в первых рядах.
Фиксация элемента на сайте при прокрутке страницы с остановкой в нужном месте на jQuery
Этот вариант является доработкой вышеуказанного способа. Я много видел сайтов, где в сайдбаре (боковой колонке сайта) фиксируются различные рекламные блоки. Все бы ничего, но при прокрутке страницы до самого низа такие блоки перекрывают футер (низ сайта) и зачастую препятствуют получению немаловажной информации или навигации в нем.
Чтобы исправить этот конфуз и удержать блок при достижении указанной области, и существует этот вариант.
Ну и те же стили из второго варианта с небольшим дополнением:
На что здесь стоить обратить внимание?
«.fixed_block» – это элемент, который мы фиксируем при прокрутке. «.fixed_block_position» — класс обертки, а «.fixed_block_stop» – это элемент (граница), достигнув которую элемент остановит свое движение (фиксацию).
Похожие публикации:
- Как вставить комментарий в файл css
- Как выглядит css код
- Как сделать чтобы картинка не выходила за блок css
- Как сделать чтобы фон подстраивался под размер экрана css
