Как сделать чтобы меню сайта двигалось вместе с прокруткой
Вариант №2 (Добавлено 18.02.2015)
.nav width: 100%;
position: fixed;
top: 0;
background-color: #c2185b;
>
.nav a float: left;
padding: 12px 14px;
display: block;
color: #fff;
font-size: 18px;
>
.nav a:hover color: #000;
background: #f8bbd0;
>
.main padding: 14px;
margin-top: 35px;
height: 1200px;
>
Как сделать фиксированное меню
Если верхняя панель навигации или просто меню (это одно и тоже), исчезает с поля зрения, при прокрутке странице, то перед вами точно не фиксированное меню.
Фиксированное меню, не следует вниз за прокруткой, а всегда остается наверху страницы. Это очень удобно для пользователя, у него всегда есть возможность, быстро перейти к другому разделу вашего сайта, не крутя колесико мышки.
Демонстрация.
Тем не менее при очевидных преимуществах наличия фиксированного меню, на каждом втором сайте, меню не зафиксированное. Может это не просто сделать, требует умений программирования на JavaScript? Сейчас мы это выясним.
Как всегда начнем с HTML разметки
Создадим блок див с классом nav, внутри которого три ссылки на разделы сайта – это и есть наше меню.
Создадим второй блок с каким-то текстом – это контент нашего сайта.
<div >
<h1>Фиксированное верхнее меню</h1>
<p>Какой-то текст какой-то текст какой-то текст..</p>
</div>
Добавим CSS
Теперь подходим к ключевому моменту, меню еще не закреплено. Вы увидите, насколько просто сделать верхнее фиксированное меню. Поскольку данный способ работает только в том случае, когда меню находится над шапкой сайта.
.nav <
width: 100%;
position: fixed;
top: 0;
background-color: #c2185b;
>
Ссылки-пункты для меню.
.nav a <
float: left;
padding: 12px 14px;
display: block;
color: #fff;
font-size: 18px;
>
Поменяем цвет при наведении.
.nav a:hover <
color: #000;
background: #f8bbd0;
>
Внимательный читатель возможно заметил, что теперь меню перекрыло верхнюю часть текста, расположенного в блоке ниже. Нам надо сдвинуть блок с контентом ниже, на высоту самого меню, примерно на 35 пикселей.
.main <
padding: 14px;
margin-top: 35px;
height: 1200px;
>
Как сделать нижнее фиксированное меню?
Нужно буквально поменять два слова. Вместо top, прописываем bottom: 0, и соответственно вместо margin-top, пишем margin-botom: 35px.
Итак, выяснилось, что сделать фиксированное меню очень просто, даже начинающему веб-разработчику. У меня остается только две версии, почему не все это делают:
Просто не задумываются об удобстве пользователя, а заказчик видимо тоже не слишком глубоко продумывает технические детали сайта.
Либо меню находится под шапкой сайта, а здесь нужен другой подход.
Фиксация меню под шапкой
Как зафиксировать меню под шапкой?
Я знаю два простых способа, как это сделать.
1) Поместите шапку и меню в общий div и примените position: fixed и top: 0 к этому блоку. Таким образом, шапка вместе с меню закрепятся наверху страницы.
2) При помощи скрипта и библиотеки jQuery, когда у верхней границы браузера зафиксируется только меню без шапки. Перед закрытием тега head, вставьте ссылку на библиотеку.
Вставьте небольшой скрипт перед закрывающим тегом body.
Замените 100 (высота шапки) на ваше значение, а также название класса nav, на ваш класс или идентификатор. Теперь при прокрутке, вы будете видеть зафиксированным только меню без шапки.
Демонстрация.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Фиксированное меню при прокрутке страницы
Очень часто на сайтах с большим количеством контента посетитель теряется на странице и чтобы найти навигационное меню приходится листать на самый верх страницы. Технологии не стоят на месте, экраны мониторов и их разрешения становятся больше, потому сейчас на сайте уже не жалко выделить сверху 40 пикселей под фиксированное меню при прокрутке страницы сайта. Посетитель сможет всегда видеть в каком он разделе находится, а также иметь быстрый доступ к навигационному меню. В конце концов это увеличивает глубину просмотра сайта 🙂
Какова суть фиксированного навигационного меню на сайте? Изначально наше меню находится на привычном ему месте, где-то в шапке, в моем случае на расстоянии 140px от верхнего края. Как только посетитель прокручивает страницу на эти самые 140px внизу, меню фиксируется в самом верху окна и там остается все оставшееся время, пока скролл не будет возвращен вновь в верхнее положение.
Фиксированное меню при прокрутке страницы это по сути панель управления, которая всегда с тобой. Меню у нас будет простое, без выпадающих элементов.
От теории к практике. Все достаточно просто и минималистично, большая часть когда отдается стилям, которые вы уже сами настраиваете под себя. Я сделала фиксированное меню как на рисунке, при скролле цвет меню становится чуть прозрачным, чтобы оно не выглядело тяжелым и под ним был виден контент.
Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px. Запомним это число)
И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.
Число 140 вы можете заменить на любое другое. Это ваш отступ меню от верхнего края.
Фиксированные меню, блоки при прокрутке страницы
Как сделать эффект залипания при прокручивании страницы на блоках навигации, меню и любых других без дёрганий и анимации. Используем обычный CSS без JS , а также рассмотрим вариант на jQuery и нативный ванильный JavaScript
- Используем CSS — position:sticky
- Как сделать залипающую шапку
- Как сделать залипающий подвал
- Используем Sticky JS
- Как сделать фиксированное меню в шапке
- HTML
- JavaScript
- CSS
- Фиксированный виджет в сайдбаре
- Q2W3 Fixed Widget — плагин WordPress для фиксации виджета сбоку
- Как пользоваться
- Как сделать залипающий виджет, который не налезает на низ сайта
- HTML
- JavaScript
- Делаем залипание в сайдбаре вручную, вариант №2
- Предварительная подготовка
- Код HTML
- Код Javascript
- В заключение
Используем CSS — position:sticky
Использование CSS -свойства position:sticky с целью достичь эффекта залипания блока внутри родительского контейнера — самый эффективный, простой и нативный способ, который работает во всех браузерах (кроме Internet Explorer, которым уже почти никто не пользуется).
Как сделать залипающую шапку
Посмотреть, как залипает header , и даже покрутить код можно на Codepen
Как сделать залипающий подвал
Посмотреть, как работает залипающий footer — Codepen
Используем Sticky JS
- Качаете файл https://raw.githubusercontent.com/rgalus/sticky-js/master/dist/sticky.min.js
- Сохраняете его на хостинге, где расположен сайт, и подключаете его в шаблоне:
- Инициализируете скрипт:
Если нужно, чтобы залипающий блок останавливался, когда заканчивается родительский контейнер, укажите в родительском контейнере атрибут data-sticky-container
Этого кода вполне достаточно, чтобы покрыть большинство требований на залипающее меню, шапку сайта или виджет в сайдбаре сбоку. Если этот вариант не помог, ниже пойдут примеры, в которых наглядно объясняется принцип и механизм работы залипания с готовыми решениями.
Как сделать фиксированное меню в шапке
Всё очень просто. Всё будет основываться на том, где находится скролл на текущий момент относительно нашего меню
- Если скролл ниже, чем верхушка блока нашего меню, включаем залипание
- Иначе отключаем залипание
Вот и вся логика.
Можете проверить, как работает
HTML будет представлять собой что-то навроде
JavaScript
В Javascript будем определять нашу логику
Если не хотите включать залипание для мобильных браузеров, вам пригодится такой код:
В CSS определяется класс, которым фиксируем меню
Строки 4, 5, 6 не обязательны, по могут помочь при горизонтальном выравнивании и создании эффекта полосы на всю ширину экрана.
Прозрачность регулируется в background: rgba(255, 0, 0, 0.1); , а именно в последнем параметре 0.1 , варируется от 0 (прозрачный) до 1 (непрозрачный), это аналог css свойства opacity
Фиксированный виджет в сайдбаре
Для больших статей дубль содержания статьи в сайдбаре в роли виджета очень удобен, видно всё содержание в категоризованном формате. Также, там можно размещать рекламу или другие виджеты с похожими статьями или чем-то подобным.
Ниже будет приведено несколько вариантов, как сделать залипающий виджет в сайдбаре сбоку от основной статьи.
Q2W3 Fixed Widget — плагин WordPress для фиксации виджета сбоку
Q2W3 Fixed Widget — это Вордпресс-плагин, который позволяет при прокрутке страницы залипать виджетам, расположенным сбоку в сайдбаре.
Как пользоваться
Вы просто устанавливаете плагин и активируете его. Теперь любой виджет в сайдбаре будет иметь такую галочку
У каждого виджета появляется возможность залипания
Как сделать залипающий виджет, который не налезает на низ сайта
Ниже показан вариант, который в основе содержит принцип фиксированной навигации из 1 пункта.
Задача — для определённого виджета сделать залипание, но так, чтобы он не налезал на подвал сайта.
Принцип прост: мы высчитываем несколько переменных, а именно:
- Координату Y верха виджета
- Высоту виджета
- Координату Y подвала сайта
Далее, на событии window.scroll мы считаем текущие координаты верха браузера.
- Если координата верха браузера выше координаты верха виджета, ничего не делаем, снимаем все эффекты
- Если прокрутили ниже верха виджета, включаем залипание
- Если прокрутили ниже координаты подвала минус высота виджета или, проще говоря, начали налезать на подвал, отключаем залипание, включаем прописку над подвалом
JavaScript
Перед скриптом необходимо загрузить jQuery
Если код выше не помогает, проверьте, не использует ли какой-либо из родительских контейнеров css-свойство backface-visibility: hidden; . Если так, то можно заменить код
на
Делаем залипание в сайдбаре вручную, вариант №2
Этот вариант сугубо кастомный, основан на специальном PHP-классе Kama_Contents, реализацию можно увидеть справа в боковой колонке. Выложу код и логику, пригодится.
Предварительная подготовка
Для начала, вам нужно иметь содержание статьи. Также, необходимо подключить jQuery
- Создаём обёртку под будущую копию содержания статьи
- Клонируем содержание статьи и добавляем её внутрь обёртки, подчищаем код
- Отслеживаем координаты верха виджета.
- Если прокрутили ниже этой верхушки, но не достигли конца статьи, фиксируем меню
- Если достигли конца статьи, скрываем виджет меню
- В остальных случаях оставляем как и было изначально
Код HTML
Для примера возьмём содержание этой страницы
Код Javascript
В заключение
Если вам понравилась статья, но что-то не получается переделать под свои нужды, не стесняйтесь спрашивать об этом в комментариях, вместе найдём решение.