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

 

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

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

Панель не так и сложна, она состоит из двух основных компонентов. Первый — код jQuery, который управляет панелью, добавляя классы и атрибуты, которые «отсоединяют» панель при прокрутке страницы вниз. Второй (который является опциональным) — кнопки CSS3, которые присутствуют на панели. Сначала мы разберем код jQuery, а затем поговорим о CSS3. Теперь начнем с разметки HTML:

Когда панель находится рядом с верхом страницы (например, когда пользователь возвращается наверх страницы или прокручивает ее обратно) класс удаляется и меню возвращается в состояние по умолчанию. Если пользователь прокручивает страницу ниже середины страницы ($mid1), кнопка скоростного перехода вниз становится кнопкой скоростного перехода наверх, и меняется графика.

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

Стили CSS. Для кнопок используются градиенты, тени, скругленные углы и тени для текста.

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