скрытие меню при прокрутке вниз и отображение при прокрутке наверх

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

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

Источник

Появление верхней панели при прокрутке

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

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

Но когда производите возврат страницы, то он аналогичным способом исчезает, все происходит при возврате страницы на место. Данный материал можно применять в обширном виде, как пример уже была сказано, это навигация, также можно задействовать для вывода социальных кнопок или функций возвращение наверх.

Так примерно можно его настроить по дизайн, это как светлым или темно прозрачным, здесь больше от самого стиля сайта зависит, вообщем сделать так, чтоб обязательно был замечен при его появление.

Приступаем к установке:

Если не подключена библиотека, но прописываем, кроме сайтов на конструкторе uCoz, там она по умолчанию установлена.

Источник