Фиксированное меню при прокрутке страницы
Очень часто на сайтах с большим количеством контента посетитель теряется на странице и чтобы найти навигационное меню приходится листать на самый верх страницы. Технологии не стоят на месте, экраны мониторов и их разрешения становятся больше, потому сейчас на сайте уже не жалко выделить сверху 40 пикселей под фиксированное меню при прокрутке страницы сайта. Посетитель сможет всегда видеть в каком он разделе находится, а также иметь быстрый доступ к навигационному меню. В конце концов это увеличивает глубину просмотра сайта 🙂
Какова суть фиксированного навигационного меню на сайте? Изначально наше меню находится на привычном ему месте, где-то в шапке, в моем случае на расстоянии 140px от верхнего края. Как только посетитель прокручивает страницу на эти самые 140px внизу, меню фиксируется в самом верху окна и там остается все оставшееся время, пока скролл не будет возвращен вновь в верхнее положение.
Фиксированное меню при прокрутке страницы это по сути панель управления, которая всегда с тобой. Меню у нас будет простое, без выпадающих элементов.
От теории к практике. Все достаточно просто и минималистично, большая часть когда отдается стилям, которые вы уже сами настраиваете под себя. Я сделала фиксированное меню как на рисунке, при скролле цвет меню становится чуть прозрачным, чтобы оно не выглядело тяжелым и под ним был виден контент.
Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px. Запомним это число)
И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.
Число 140 вы можете заменить на любое другое. Это ваш отступ меню от верхнего края.
Узнайте, как сделать «фиксированное» меню на сайте с помощью CSS.
Как создать фиксированное верхнее меню
Шаг 1) Добавить HTML:
Пример
Какой-то бессмысленный текст..
Шаг 2) Добавить CSS:
Пример
/* Панель навигации */
.navbar <
overflow: hidden;
background-color: #333;
position: fixed; /* Установите панель навигации в фиксированное положение */
top: 0; /* Расположите панель навигации вверху страницы */
width: 100%; /* На всю ширину */
>
/* Ссылки внутри навбара */
.navbar a <
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>
/* Изменить фон при наведении указателя мыши */
.navbar a:hover <
background: #ddd;
color: black;
>
/* Основное содержимое */
.main <
margin-top: 30px; /* Добавьте верхнее поле, чтобы избежать наложения контента */
>
Как создать фиксированное нижнее меню
Чтобы создать фиксированное нижнее меню, используйте position:fixed и bottom:0 :
Пример
/* Панель навигации */
.navbar <
position: fixed; /* Установите панель навигации в фиксированное положение */
bottom: 0; /* Расположите панель навигации внизу страницы */
width: 100%; /* На всю ширину */
>
/* Основное содержимое */
.main <
margin-bottom: 30px; /* Добавьте нижнее поле, чтобы избежать наложения контента */
>
Совет: Перейдите к учебнику CSS Навбар на нашем сайте W3Schools на русском, чтобы узнать больше о панелях навигации.
Узнайте, как создать «фиксированное» меню с помощью CSS.
Как создать фиксированное верхнее меню
Шаг 1) добавить HTML:
Пример
Some text some text some text some text..
Шаг 2) добавить CSS:
Пример
/* The navigation bar */
.navbar <
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
>
/* Links inside the navbar */
.navbar a <
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>
/* Change background on mouse-over */
.navbar a:hover <
background: #ddd;
color: black;
>
/* Main content */
.main <
margin-top: 30px; /* Add a top margin to avoid content overlay */
>
Как создать фиксированное нижнее меню
Чтобы создать фиксированное нижнее меню, используйте position:fixed и bottom:0 :
Пример
/* The navigation bar */
.navbar <
position: fixed; /* Set the navbar to fixed position */
bottom: 0; /* Position the navbar at the bottom of the page */
width: 100%; /* Full width */
>
/* Main content */
.main <
margin-bottom: 30px; /* Add a bottom margin to avoid content overlay */
>
Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.
Три варианта фиксации элемента на сайте на CSS/jQuery
Фиксирование элементов сейчас пользуется большой популярностью. Так, например, «Яндекс» или социальная сеть «ВКонтакте» (на момент написания статьи) фиксируют свое меню и поиск при прокрутке страницы. Вполне хорошее решение, позволяющее ограничить пользователя от лишних действий в получении доступа к нужному функционалу сайта и позволяющее сделать некий акцент на важных элементах.
Зафиксировать элемент на сайте можно несколькими способами, каждый из них хорош в своем случае.
Фиксация элемента на сайте на CSS
Самый простой вариант – это фиксация элемента на чистом CSS. Все, что вам нужно, это добавить следующие стили к элементу:
Положение в таком случае будет верхнее, по всей ширине экрана. Вариант отлично подходит для элементов, которые изначально находятся в самом верху (меню и поиск).
Если хотите поиграть с положением – измените значение свойств left, top, right и bottom соответственно.
Минусы – не подходит для элементов, находящихся ниже верхней границы сайта.
Здесь на помощь к нам приходит другое значение position – sticky. Оно фиксирует тот или иной элемент только в рамках первого родительского контейнера. Фиксация элемента при этом начнется тогда, когда верхняя граница элемента совпадет с верхней частью окна браузера, и завершится при достижении элементом конца родителя, при этом другие элементы (и даже окружаемый текст) не смещаются, что очень удобно в отдельно взятых случаях. Пример использования:
Эти стили вы присваиваете тому элементу, который хотите зафиксировать. Свойство top со значением «10px» говорит здесь о том, что при фиксации элемента необходимо сделать отступ от верхней границы в 10 пикселей.
Фиксация элемента на сайте при прокрутке страницы на jQuery
Этот вариант, в отличие от первого, фиксирует нужный вам элемент только тогда, когда его положение равняется верхней границе вашего экрана при прокрутке страницы.
Их вы вставляете без изменений. Отличный вариант для фиксации рекламных блоков или других элементов находящихся не в первых рядах.
Фиксация элемента на сайте при прокрутке страницы с остановкой в нужном месте на jQuery
Этот вариант является доработкой вышеуказанного способа. Я много видел сайтов, где в сайдбаре (боковой колонке сайта) фиксируются различные рекламные блоки. Все бы ничего, но при прокрутке страницы до самого низа такие блоки перекрывают футер (низ сайта) и зачастую препятствуют получению немаловажной информации или навигации в нем.
Чтобы исправить этот конфуз и удержать блок при достижении указанной области, и существует этот вариант.
Ну и те же стили из второго варианта с небольшим дополнением:
На что здесь стоить обратить внимание?
Фиксированное меню
Узнайте, как создать «фиксированное» меню с помощью CSS.
Cоздать фиксированное меню
Шаг 1) Добавить HTML:
Пример
Какой-то текст какой-то текст.. какой-то текст какой-то текст..
Шаг 2) Добавить CSS:
Пример
/* Навигационная панель */
.navbar <
overflow: hidden;
background-color: #333;
position: fixed; /* Установите навигационную панель в фиксированное положение */
top: 0; /* Расположите навигационную панель в верхней части страницы */
width: 100%; /* Полная ширина */
>
/* Ссылки в панели навигации */
.navbar a <
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>
/* Изменение фона при наведении курсора мыши */
.navbar a:hover <
background: #ddd;
color: black;
>
/* Основное содержание */
.main <
margin-top: 30px; /* Добавить верхнее поле, чтобы избежать наложения */
>
Создать фиксированное нижнее меню
Чтобы создать фиксированное нижнее меню, используйте position:fixed и bottom:0 :
Пример
/* Навигационная панель */
.navbar <
position: fixed; /* Установите навигационную панель в фиксированное положение */
bottom: 0; /* Расположите навигационную панель в нижней части страницы */
width: 100%; /* Полная ширина */
>
/* Основное содержание */
.main <
margin-bottom: 30px; /* Добавить в нижнее поле, чтобы избежать наложения */
>
Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигационных панелях.
