Загрузка

Как закрепить шапку сайта?
Статьи / Полезное для веб-мастера 03.09.2021 211

Как закрепить шапку сайта?

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

Например, если мы расположили в ней номер для связи или кнопку "Заказать сейчас", пользователь читает информацию и всё таки уже почти решился, а здесь и кнопка приглянулась - он делает заказ, в ситуации наоборот пользователь просто покинет сайт: "Авось, ещё зайду".

Это удобно и на практике, особенно на мобильных устройствах.

Что необходимо для реализации?


Чтобы закрепить шапку мы будем использовать JS + CSS.
Нам необходимо добавить код, а уже после его видоизменять в зависимости от потребности.

Начнём!

JаvaScript: добавляем скрипт на сайт.


Для начала добавим jаvascript.
Благодаря исполнению скрипта мы сможем изменять код сайта, когда будет выполнено заданное условие. 

Добавив новый class мы сможем изменять шапку CSS свойством так, как нам необходимо.

$(function() {
 let header = $('.header'); // Прописываем class нашей шапки. Скрипт поймёт, куда нужно добавить код.
  
 $(window).scroll(function() {
   if($(this).scrollTop() > 89) { // устанавливаем значением в пикселях, когда появится закрепление. Например - размер шапки.
    header.addClass('header_fixed');  // Добавляем наш class, чтобы изменить свойство шапки
   } else {
    header.removeClass('header_fixed'); // Удаляем наш класс, если пользователь поднялся выше.
   }
 });
});

Самое важное - чтобы скрипт был подключен на странице, где сама шапка. Можно добавить его в код напрямую между <script></script> или же в подключаемый JS файл на сайте.

CSS: задаем необходимые свойства


Добавив данный код, мы изменим позицию нашей шапки на fixed (фиксированную при прокрутке страницы).
Это означает, что шапка будет следовать за посетителем "Прилипнув" к самому верху страницы.

.header_fixed {
position: fixed;
left: 0;
top: 0;
}


В целом - готово! Теперь шапка будет фиксироваться.

Исправляем ситуацию с Якорями.

В этой схеме есть одно "НО", которое кроется в "Якорях".

Это некие ссылки для разделения страницы, например - перемещения к нужным элементам сайта в один клик.
Которые выглядит примерно так: typeweb.ru/#block1, к слову, такой якорь можно наблюдать вверху статьи для перемещения между заголовками.

В этом методе шапка закроет нам часть контента при перемещении, но это можно исправить.

Как это решить? Например, с помощью псевдо-элемента "before".
Допустим, якоря мы используем для заголовков H1.

Добавим следующее в CSS: 
h1:before {display: block;content: "";height: 180px;margin: -180px 0 0;}

Тем самым создадим при прокрутке невидимую "Пустоту", на 180px вверху, которую у нас "съест" шапка.

Без before:

Добавив before к заголовку:



Подводим итоги данной реализации


Сложна ли данная реализация? Нет.
В целом, всё максимально просто.

Мы добавили JS, который добавит class к шапке при прокрутке сайта (через N кол-во пикселей).

В самом же class "header_fixed" мы задали значение позиции на фиксированную, а после исправили проблемы с якорями, создав "Пустоту", которую не видит пользователь.

Успехов Вашим проектам! Есть вопрос? Пиши в комментарии!

Автор публикации: Иван Цыганков

TWEB
+
Никнейм: TWEB
Всего постов: 12
Всего комментариев: 8
Привет! Тебе понравилась моя статья?
Надеюсь на твою оценку!
Нравится Не нравится Рейтинг: 0
Ой, чуть не забыл, ещё можно поделиться!

Похожие публикации


Комментарии (0)

Добавить комментарий