Я наблюдал такое поведение в различных нативных приложениях и веб-сайтах: навигация исчезает при прокрутке сайта/приложения, а при прокрутке вверх она появляется снова. Я называю это «застенчивой навигацией» просто потому, что в большинстве реализаций навигация скрывается через пару секунд после отображения при прокрутке вверх.
Навигация убирается, когда вы прокручиваете страницу вниз, чтобы вы могли видеть больше контента. И наоборот, когда вы прокручиваете вверх, навигация интуитивно появляется снова. Вы можете увидеть подобное поведение в мобильном поисковом приложении Google и поиске Bing в Интернете (я уверен, что есть и другие).
Давайте посмотрим, почему вы можете использовать (или избегать) эту технику:
Плюсы
- меньше необходимости иметь кнопку «наверх»
- не обязательно прокручивать до конца, чтобы получить доступ к навигации
- занимает меньше места, чем всегда фиксированная навигация
- не охватывает содержание все время
Минусы
- немного сложнее, чем простая навигация со статической или фиксированной позицией (потому что это и то, и другое, в зависимости от контекста)
- еще сложнее, если вы хотите разумно реагировать на движения мыши (что, если пользователь движется к навигации, когда она исчезает)
- исчезает, если вы не взаимодействовали с ним в течение некоторого периода времени (если вы не находитесь в верхней части страницы)
Я решил сделать небольшой плагин для реализации этой техники на любом элементе навигационного типа, который вы хотите. Это всего лишь грубая реализация, но ее действительно легко добавить на ваш сайт с помощью небольшого CSS + этого скрипта. Если у вас есть предложения по улучшению или вы обнаружили ошибку, поделитесь ею!
Посмотрите код в действии на CodePen
Первоначально опубликовано на сайте mattshwery.com 12 августа 2013 г.
