Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Разработка сайтов под ключ
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
26
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

25
Битрикс24

Битрикс24

www.bitrix24.ru

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

12
Devicerra

Devicerra

devicerra.com

11
Reader

Reader

Интернет-журнал о современных технологиях.

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Aword

Aword

Приложение для изучения английских слов

9
GIFTD

GIFTD

giftd.tech

8
Eczo.bike

Eczo.bike

www.eczo.bike

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

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

9 152 29 В избранное Сохранено
Авторизуйтесь
Вход с паролем
В последнее время в моду вошла такая тенденция как фиксированное меню при прокрутке страницы. Обычно это горизонтальное меню на Landing Page сайтах.

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

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

Если же посетитель прокручивает страницу вверх и достигает начала страницы, меню возвращается на свое место. Таким образом, посетитель, находясь в любом месте страницы, может его использовать и переходить на другие страницы сайта. Это очень удобно и соответствует принципам юзабилити.

b_558e5331960e9.jpg

Сейчас я расскажу Вам как реализовать такое меню с помощью потратив минимум своего времени и не прибегая за помощью к профессионалам.

Для начала нам подключить jQuery-библиотеку для сайта

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

можно подключить локально или через google.

Для локального подключения необходимо скачать файл jQuery с официального сайта http://jquery.com/

CSS

b_558e534cddfe5.jpg

JavaScript

b_558e53698c52a.jpg

В скрипте создаем 2 переменные в которые сохраняем значения высоты шапки и отступа блока с меню сверху. Отступ может отсутствовать (как в данном случае). Затем пишем обработчик на событие onScroll объекта <code>window. В нем с помощью метода <code>scrollTop() вычисляем расстояние от верха страницы до текущей позиции скроллера прокрутки. На основании расчета позиционируем блок с меню.

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

0
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
Симулятор бизнес-процессов
Сервис имитационного моделирования и оптимизации бизнес-процессов
Prolis Labkk
Для кого эта статья? Лучше бы привели полный код страницы, а то вряд ли читатель Спарка догадается подключить jQuery на главную станицу, замедлив ее открытие браузером.
Ответить
Показать предыдущие комментарии
ZONA
Товары и услуги со всей России
Антон Филиппов
Я не буду вас переубеждать, а цифры (которые я привел выше) все говорят за себя. А что касается примеров, то по тому же гуглу, мы вытаскиваем 96/100 на днях закончат пару моментов, и запустим сайт на полную, думаю будет все 100
Ответить
Симулятор бизнес-процессов
Сервис имитационного моделирования и оптимизации бизнес-процессов
Prolis Labkk
А, ну теперь я спокоен, кэш у вас включен.
Ответить
Симулятор бизнес-процессов
Сервис имитационного моделирования и оптимизации бизнес-процессов
Prolis Labkk
Для 100 надо внешние стили загружать в теле документа, а не в заголовке, что противоречит директивам ВЦСПС и сдравому смыслу.
Ответить
ZONA
Товары и услуги со всей России
Антон Филиппов
Я в курсе) это был некий сарказм! А вообще есть обманка, можно загружать через CDN или поддомен и тогда эта часть отпадает). У нас и сейчас очень все не плохо, тут главное не сильно заморачиваться ибо идеал не всегда хорошо.
Ответить
Заработай или сдохни
Вся боль и слезы российского бизнеса от первого лица без рекламы и смс
Фримен Константин
Активно минусуют приверженцы dial-up соединения?))
Ответить
Евгений Леонов
А у меня срезают баллы за несжатые картинки и библиотеки, которые подтаскивает сам гугл.
Ответить
ZONA
Товары и услуги со всей России
Антон Филиппов
С картинками не подскажу ибо есть много способов их сжимать, а многие библиотеки уже есть на cnd и в кэшах...

Как пример https://tech.yandex.ru/jslibs/ тоже самое есть на самом jquery и google...
Ответить
Евгений Леонов
Подключен адсенс, и вот на него сам гугл и ругается - картинки не те, JS не тот.
Ответить
ZONA
Товары и услуги со всей России
Антон Филиппов
С данной проблемой не сталкивался (не углублялся), возможно решение будет, через асинхронную подргрузку или через фрейм..., но не советую) Лучше пусть балов не доберете, чем коряво будет работать и что самое страшное, могут придраться и забанить акк.
Ответить
Whaler
Рекламные объявления для платящей аудитории
Алексей Тарасов
Тащить jQuery ради такого? Это элементарно делается на ванильном js.
Ответить
ALLCOM-media
Разработка сайтов под ключ
Омаров Хабиб
вы опять меня не поняли, любая готовая система управления сайтами уже стоит на jQuery. это просто один из МЕТОДОВ реализации
Ответить
Whaler
Рекламные объявления для платящей аудитории
Алексей Тарасов
Ну где же стоит? Вы сами в середине статьи пишите: "Для начала нам подключить jQuery-библиотеку для сайта".
Ответить
ALLCOM-media
Разработка сайтов под ключ
Омаров Хабиб
друг мой, это я написал потому что выше в комментариях было сказано что не понятно для новичка. Напишите говорит что нужно jQuery подключить
Ответить
Whaler
Рекламные объявления для платящей аудитории
Алексей Тарасов
Демки
http://codepen.io/phantomesse/pen/AEvbl
http://codepen.io/codeams/pen/uljkp

В поиске по "sticky" на codepen.io найдёте ещё массу вариаций.
Ответить
ALLCOM-media
Разработка сайтов под ключ
Омаров Хабиб
Спасибо, друг
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать