Допустим у вас важная информация например контакты находятся в шапке и вы хотите что бы они всегда были на веду у клиента или просто хотите что основная навигация всегда была под рукой.
То можно просто зафиксировать шапку сайта что бы при прокрутке она всегда была на одном месте при прокрутке страницы. Для того что бы это реализовать нам понадобится немного подправить стили (CSS).
И теперь добавим необходимые стили:
Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает несколько таблиц на одной странице.
Из минусов – не корректно работает на мобильных.
У таблицы добавляется только класс – fixtable .
Всем привет. Сегодня посмотрел статистику поисковых запросов, по которым люди переходят на блог и обнаружил, что есть несколько совсем не релевантных. Нет, не блогу, а статьям.
Один из них как зафиксировать шапку сайта? Я тут же решил исправить положение и написать статью, так как тема актуальная, и есть вопросы в данной области.
Вообще, существует несколько способов того, как закрепить шапку сайта при прокрутке страницы. Можно воспользоваться javascript, но я не очень силен в этой теме и только изучаю ее. Поэтому, пока, будем обходиться css. Слава Богу, зафиксировать шапку сайта (да и не только шапку, а любой другой элемент), можно «малой кровью» 🙂
На самом деле, метод фиксации элемента при прокрутке страницы очень простой, и вы удивитесь, как просто решается данная проблема.
Фиксация шапки при прокрутке страницы
Для того, чтобы зафиксировать шапку, придется создать два блока. Один — для того, чтобы была возможность центрировать шапку. А в нем дочерний, который и будет фиксироваться. Начнем…
Вот такая простая html структура! Теперь добавим стили!
Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.
Вот такая маленькая статья получилась сегодня. Если будут вопросы – пишите их в комментариях. Постараюсь помочь. До встречи на смартлендинг 1528219974202 —>
