Фиксированная шапка сайта при прокрутке

Фиксированная шапка сайта при прокрутке

Допустим у вас важная информация например контакты находятся в шапке и вы хотите что бы они всегда были на веду у клиента или просто хотите что основная навигация всегда была под рукой.

То можно просто зафиксировать шапку сайта что бы при прокрутке она всегда была на одном месте при прокрутке страницы. Для того что бы это реализовать нам понадобится немного подправить стили (CSS).

И теперь добавим необходимые стили:

Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.

Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает несколько таблиц на одной странице.

Из минусов – не корректно работает на мобильных.

У таблицы добавляется только класс – fixtable .

Всем привет. Сегодня посмотрел статистику поисковых запросов, по которым люди переходят на блог и обнаружил, что есть несколько совсем не релевантных. Нет, не блогу, а статьям.

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

Вообще, существует несколько способов того, как закрепить шапку сайта при прокрутке страницы. Можно воспользоваться javascript, но я не очень силен в этой теме и только изучаю ее. Поэтому, пока, будем обходиться css. Слава Богу, зафиксировать шапку сайта (да и не только шапку, а любой другой элемент), можно «малой кровью» 🙂

На самом деле, метод фиксации элемента при прокрутке страницы очень простой, и вы удивитесь, как просто решается данная проблема.

Фиксация шапки при прокрутке страницы

Для того, чтобы зафиксировать шапку, придется создать два блока. Один — для того, чтобы была возможность центрировать шапку. А в нем дочерний, который и будет фиксироваться. Начнем…

Читайте также:  Яндекс диск поиск пользователя

Вот такая простая html структура! Теперь добавим стили!

Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.

Вот такая маленькая статья получилась сегодня. Если будут вопросы – пишите их в комментариях. Постараюсь помочь. До встречи на смартлендинг 1528219974202 —>

Ссылка на основную публикацию
Удаление последнего элемента списка
Введение. Основные операции О дносвязный список – структура данных, в которой каждый элемент (узел) хранит информацию, а также ссылку на...
Телефон самсунг с хорошей камерой недорогой
Если вы ищете лучший телефон Samsung, тогда рейтинг поможет разобраться в их различиях. Посмотрите какой смартфон лучшие купить из всех...
Телефон перестал заряжаться быстрой зарядкой
Наверняка многие сталкивались с тем, что смартфон ни с того ни с сего перестаёт заряжаться. Другая распространённая беда — слишком...
Удаление дубликатов фотографий на русском бесплатно
Здравствуйте Уважаемый Друг. У каждого из нас на компьютере хранится большое количество различных фотографий изображений и тому подобных картинок. Парой...
Adblock detector