css фиксация меню при прокрутке
Фиксированное меню при прокрутке страницы
Очень часто на сайтах с большим количеством контента посетитель теряется на странице и чтобы найти навигационное меню приходится листать на самый верх страницы. Технологии не стоят на месте, экраны мониторов и их разрешения становятся больше, потому сейчас на сайте уже не жалко выделить сверху 40 пикселей под фиксированное меню при прокрутке страницы сайта. Посетитель сможет всегда видеть в каком он разделе находится, а также иметь быстрый доступ к навигационному меню. В конце концов это увеличивает глубину просмотра сайта 🙂
Какова суть фиксированного навигационного меню на сайте? Изначально наше меню находится на привычном ему месте, где-то в шапке, в моем случае на расстоянии 140px от верхнего края. Как только посетитель прокручивает страницу на эти самые 140px внизу, меню фиксируется в самом верху окна и там остается все оставшееся время, пока скролл не будет возвращен вновь в верхнее положение.
Фиксированное меню при прокрутке страницы это по сути панель управления, которая всегда с тобой. Меню у нас будет простое, без выпадающих элементов.
От теории к практике. Все достаточно просто и минималистично, большая часть когда отдается стилям, которые вы уже сами настраиваете под себя. Я сделала фиксированное меню как на рисунке, при скролле цвет меню становится чуть прозрачным, чтобы оно не выглядело тяжелым и под ним был виден контент.
Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px. Запомним это число)
И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.
Число 140 вы можете заменить на любое другое. Это ваш отступ меню от верхнего края.
Три варианта фиксации элемента на сайте на CSS/jQuery
Фиксирование элементов сейчас пользуется большой популярностью. Так, например, «Яндекс» или социальная сеть «ВКонтакте» (на момент написания статьи) фиксируют свое меню и поиск при прокрутке страницы. Вполне хорошее решение, позволяющее ограничить пользователя от лишних действий в получении доступа к нужному функционалу сайта и позволяющее сделать некий акцент на важных элементах.
Зафиксировать элемент на сайте можно несколькими способами, каждый из них хорош в своем случае.
Фиксация элемента на сайте на CSS
Самый простой вариант – это фиксация элемента на чистом CSS. Все, что вам нужно, это добавить следующие стили к элементу:
Положение в таком случае будет верхнее, по всей ширине экрана. Вариант отлично подходит для элементов, которые изначально находятся в самом верху (меню и поиск).
Если хотите поиграть с положением – измените значение свойств left, top, right и bottom соответственно.
Минусы – не подходит для элементов, находящихся ниже верхней границы сайта.
Здесь на помощь к нам приходит другое значение position – sticky. Оно фиксирует тот или иной элемент только в рамках первого родительского контейнера. Фиксация элемента при этом начнется тогда, когда верхняя граница элемента совпадет с верхней частью окна браузера, и завершится при достижении элементом конца родителя, при этом другие элементы (и даже окружаемый текст) не смещаются, что очень удобно в отдельно взятых случаях. Пример использования:
Эти стили вы присваиваете тому элементу, который хотите зафиксировать. Свойство top со значением «10px» говорит здесь о том, что при фиксации элемента необходимо сделать отступ от верхней границы в 10 пикселей.
Фиксация элемента на сайте при прокрутке страницы на jQuery
Этот вариант, в отличие от первого, фиксирует нужный вам элемент только тогда, когда его положение равняется верхней границе вашего экрана при прокрутке страницы.
Их вы вставляете без изменений. Отличный вариант для фиксации рекламных блоков или других элементов находящихся не в первых рядах.
Фиксация элемента на сайте при прокрутке страницы с остановкой в нужном месте на jQuery
Этот вариант является доработкой вышеуказанного способа. Я много видел сайтов, где в сайдбаре (боковой колонке сайта) фиксируются различные рекламные блоки. Все бы ничего, но при прокрутке страницы до самого низа такие блоки перекрывают футер (низ сайта) и зачастую препятствуют получению немаловажной информации или навигации в нем.
Чтобы исправить этот конфуз и удержать блок при достижении указанной области, и существует этот вариант.
Ну и те же стили из второго варианта с небольшим дополнением:
На что здесь стоить обратить внимание?
Узнайте, как создать «фиксированное» меню с помощью 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.
Фиксированное меню при прокрутке сайта
2016-10-10 / Вр:01:52 / просмотров: 18498
Если вы решили зафиксировать меню при прокрутке сайта, то в этой статье вы узнаете, как сделать на сайте фиксированное меню, причем нескольких видов.
Фиксированное меню сверху (HTML + CSS) – при прокрутке страницы, меню всегда на виду и не теряет своей верхней позиции.
Фиксированное меню снизу (HTML + CSS) – при прокрутке страницы, меню всегда на виду и не теряет своей нижней позиции
Фиксированное меню под шапкой (HTML + CSS + jQuery) – меню размещается под шапкой сайта, но, при прокрутке веб страницы, меню фиксируется вверху окна браузера. Если посетитель начнет крутить мышку назад, то меню вернется на свое прежнее место под шапку сайта.
Фиксированное меню внизу экрана (HTML + CSS + jQuery) – шапка сайта занимает весь экран, а меню прилепляется к низу экрана. При прокрутке страницы, меню прилепляется к верхней части экрана.
Фиксированное меню сверху (HTML + CSS)
Самый главный параметр для фиксированного меню для сайта – это:
Фиксированное меню снизу (HTML + CSS)
Самый главный параметр для фиксированного меню для сайта – это:
Фиксированное меню под шапкой (HTML + CSS + jQuery)
К примеру, шапка сайта имеет высоту 150 px. И под шапкой размещено фиксированное меню.
Добавьте в HTML вот такой код:
Строка №2 – высота шапки. Если высота шапки будет больше, нужно это значение заменить.
Фиксированное меню внизу экрана (HTML + CSS + jQuery)
Шапка сайта занимает весь экран, а меню в это время находится внизу экрана. При прокрутке страницы, меню поднимается до тех пор, пока не достигнет верха, после чего меню фиксируется.
Итак, добавьте этот код в HTML:
Вот и все.
Ковыряйте кода, меняйте под свои нужды и потребности. Естественно, чтобы делать какие-либо изменения в коде, нужно знать, как минимум, основы HTML и CSS.
WebComplex – самостоятельное создание сайтов
Все о самостоятельном создании сайта
Делаем фиксированное меню при прокрутке страницы
Итак, задача на сегодня сделать меню, которое прилипает к верхней части браузера при прокрутке страницы.
Для работы нам понадобится библиотека jQuery и браузер с поддержкой CSS3.
Начнем с HTML структуры нашего меню, а она особо не отличается от всех остальных.
HTML структура меню
Безусловно, чтобы наше меню приобрело узнаваемый вид, мы его немного стилизуем.
CSS код меню
Теперь после всех подготовительных работ мы можем приступить к решению самой задачи.
Для того чтобы меню прилипало к верху при прокрутке, нам необходимо две вещи:
Что касается первой задачи, то с ней справится небольшой код jQuery, но сначала мы создадим отдельный стиль для нашего фиксированного и стандартного меню.
Отдельный классы для фиксированного и нормального состояния меню
Добавим новый класс к меню
jQuery код
Теперь код для первой задачи:
Думаю, что код настолько прост, что в пояснении не нуждается. Но все же прокомментирую. Мы используем событие скролл окна браузера для постоянного отслеживания позиции полосы прокрутки, при данном событии. Написали условия проверки позиции скрола и состояния меню (фиксированное или нет), если мы прокрутили страницу вниз на указанное значение, то появляется фиксированный вариант. Второе условие для смены с фиксированного меню на стандартное.
Вот в принципе и вся реализация, но мы на этом не остановимся и пойдем дальше.
Немного CSS3 для красоты 🙂
Добавим jQuery эффекты.
Теперь можно поиграться с эффектным появлением нашего меню. Используем метод hover для добавления и удаления прозрачности фона меню при наведении и удалении курсора.
В заключении можно сказать, что нет предела совершенству и продолжать играться со стилями, и эффектами можно еще долго.
Реализовать эту задачу можно и на чистом javaScript, но jQuery имеет больший интерес 🙂
На фоне данного урока появилась еще одна мысль: сделать расширение основного контента при исчезновении из вида боковой колонки (как ВКонтакте).
Если у вас есть вопросы, предложения, то сотавляйте их в комментариях ниже, спасибо 🙂
222 thoughts on “ Делаем фиксированное меню при прокрутке страницы ”
Первый(простой) пример – не работает.
Второй, с CSS3 отлично, но мне нужен простой.
Не можете глянуть, в чём проблема?
Все пофиксил, действительно в 10 строчках скрипта закралось пару строк мусора, что еще раз подчеркивает всю опасность копи-паста ))
Спасибо вам за бдительность ))
Вот ссылка на ваш (простой) пример: //jsfiddle.net/zStXH/
подскажи пожалуйста, а jQuery с эффектами куда закинуть нужно?
я с небольшим опытом. и на uCoz сайте
стили добавил, html тоже
Я не советую делать на ucoz сайты, попробуй на //hostinger.com
Я сам начинал с ucoz, и знаю как неудобно делать там сайты.
Здравствуйте. У меня похожий вопрос, только на reg.ru хостинг, немогу понять куда jQuery код нужно добавить и если просто новый файл с этим кодом создать, то как его обозвать чтобы он работал? Добавил блок с html, css в style и jQuery поначалу в новый созданный файл menu.js в папку на серваке js, прописал в блок с меню подключение jquery такого вида:
пробовал и попроще, но это на мой взгляд самый оптимальный, и ничего не вышло. Красивая синия менюшка появилась, однако она не залепает, иными словами jQuery не работает. Я не слишком силен во всем этом.. а особенно в js, если не сложно подскажите какой нибудь выход из этой ситуации.
Зарание спасибо 😉
Здравствуйте. Вы мне очень помогли, читаю вас постоянно. А как сделать что бы меню после прокрутки на определёноое количество пикселов появлялось плавно, а не рывком? Жду помощи.Заранее спасибо.