меню при прокрутке вверх

Фиксированное меню при прокрутке страницы

Очень часто на сайтах с большим количеством контента посетитель теряется на странице и чтобы найти навигационное меню приходится листать на самый верх страницы. Технологии не стоят на месте, экраны мониторов и их разрешения становятся больше, потому сейчас на сайте уже не жалко выделить сверху 40 пикселей под фиксированное меню при прокрутке страницы сайта. Посетитель сможет всегда видеть в каком он разделе находится, а также иметь быстрый доступ к навигационному меню. В конце концов это увеличивает глубину просмотра сайта 🙂

Какова суть фиксированного навигационного меню на сайте? Изначально наше меню находится на привычном ему месте, где-то в шапке, в моем случае на расстоянии 140px от верхнего края. Как только посетитель прокручивает страницу на эти самые 140px внизу, меню фиксируется в самом верху окна и там остается все оставшееся время, пока скролл не будет возвращен вновь в верхнее положение.

Фиксированное меню при прокрутке страницы это по сути панель управления, которая всегда с тобой. Меню у нас будет простое, без выпадающих элементов.

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

Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px. Запомним это число)

И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.

Число 140 вы можете заменить на любое другое. Это ваш отступ меню от верхнего края.

Источник

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, если не сложно подскажите какой нибудь выход из этой ситуации.
Зарание спасибо 😉

Здравствуйте. Вы мне очень помогли, читаю вас постоянно. А как сделать что бы меню после прокрутки на определёноое количество пикселов появлялось плавно, а не рывком? Жду помощи.Заранее спасибо.

Источник

Как сделать меню которое при скроле вверх показывается?

Сделал меню которое при прокрутке вверх показывается, но оно мне не нравится) Так как использовал абсолютное позиционирование. Какое есть более изящное решение с тем же функционалом, но без применения position:absolute

Оценить 2 комментария

А какие еще варианты?
По другому никак скорее всего.

Вообще это очень странное поведение, оно уж тогда либо всегда должно показываться, либо только вверху сайта. А так чтобы при скролле вверх появлялось очень непонятно. Ни разу такое не встречал и как-то неудобно что ли. Не очевидно для пользователя.

Вариантов много, просто хотелось бы посмотреть интерпретацию от профи.

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

Александр Vampireos: «классический» вариант для обычных сайтов: https://getbootstrap.com/examples/navbar-fixed-top/
На лендингах меню как правило трансформируется в более компактное при скролле, но не исчезает совсем.

Скролить наверх на андроиде например вообще не люблю, потому что начинает вылезать адресная строка(которая скрывается при скролле вниз) и занимать много полезного места.
А если будет вылезать меню и адресная строка сразу, то получится непонятно что вообще.
Ну тут на вкус и цвет в общем-то.

Что за странная идея показывать меню, только при начале скролла вверх?

Смысл плавающего меню в том, чтобы оно ВСЕГДА было видно/доступно посетителю. Можно не целиком, можно от него только гамбургер или просто более компактный вид панельки, но должно быть понятно, что оно есть.

Источник

Фиксированное меню при прокрутке сайта

2016-10-10 / Вр:01:52 / просмотров: 18510

Если вы решили зафиксировать меню при прокрутке сайта, то в этой статье вы узнаете, как сделать на сайте фиксированное меню, причем нескольких видов.

Фиксированное меню сверху (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.

Источник

Фиксирующаяся при скролле панель навигации, только CSS

Как закрепить панель навигации в верхней части страницы только с помощью CSS и не скроллить её вместе с контентом.

Чтобы получить аналогичный эффект, можно использовать только простое CSS-свойство.

position: sticky

Свойство position: sticky укажет браузеру, что следует позволить элементу прокручиваться вместе с остальной частью документа, пока он не достигнет верхней части страницы. Как только это произойдет, позиция элемента фиксируется, а остальные элементы на странице прокручиваются за ним.

На первый взгляд всё работает нормально. Но, если приглядеться, клик по ссылке в навигации скроллит контент так, что заголовок секции самым бесстыдным образом оказывается под зафиксировавшейся панелью с навигацией. Это поправимо.

scroll-margin-top

Свойство scroll-margin-top укажет браузеру высоту отступа, которую он должен использовать при скролле к контейнеру. Это свойство следует указывать элементам с якорями, на которые ведут ссылки из панели навигации.

И ещё: этот отступ применяется только к прокрутке. Сам элемент-контейнер по-прежнему сохраняет свои обычные отступы в контексте документа.

HTML-код примера фиксирующейся при прокрутке панели навигации

CSS-код примера фиксирующейся панели скролл-навигации

Пара слов о поддержке position: sticky и scroll-margin-top браузерами

Свойство position: sticky работает во всех современных браузерах, но на момент написания этой заметки не работает с элементами thead и tr в Chrome и Edge (хотя оно работает с th ), а также table в Firefox.

Свойство scroll-margin-top работает во всех современных браузерах.

Оба CSS свойства не работают в маргинальном IE-11 и более старых версиях IE.

Источник