В данном материале мы научимся создавать фиксированное меню (header). В основном, есть заголовок с текстом и навигационный тег с некоторыми элементами навигации. При прокрутке вниз текст заголовка будет скрыт с эффектом анимации, а панель навигации будет закреплена в верхней части веб-страницы. И когда вы прокрутите страницу вверх, раздел заголовка снова откроется. Там мы использовали HTML для создания макета, CSS для стилей и анимации, jQuery для работы. Если вы хотите создать одностраничный веб-сайт, то вы можете создать эту программу, изменив ее. Также вы можете применить этот эффект на своем сайте, используя CSS-коды.
Если вы сейчас думаете о том, как на самом деле выглядит это меню, посмотрите предварительный просмотр, перейдя по ссылке демонстрация после описания к материалу.
Прежде чем делиться исходным кодом, давайте поговорим об этом. Сначала мы создали раздел заголовка с использованием class - ufive-header и внутри него поместили заголовочный текст и тег. Раздел nav содержит 4 элемента для ссылок navbar. Теперь, используя CSS, мы разместили все элементы в нужном месте, как вы можете видеть на превью. Сначала CSS дал всем базовые значения, такие как размер, положение, поля, отступы и т.д., для всех элементов. Для создания эффекта анимации скрытия текста, мы использовали команду CSS transform, а для плавной анимации - команду перехода.
Остальная информация тут - источник