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

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

Узнайте, как создать "фиксированное" меню с помощью CSS.

Как создать фиксированное верхнее меню

Шаг 1) добавить HTML:

Пример

Some text some text some text some text..

Шаг 2) добавить CSS:

Чтобы создать фиксированное верхнее меню, используйте position:fixed и top:0 . Обратите внимание, что фиксированное меню будет накладывать другое содержимое. Чтобы исправить это, добавьте margin-top (к содержимому), которое равно или больше, чем высота вашего меню.

Пример

/* The navigation bar */
.navbar <
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
>

/* Links inside the navbar */
.navbar a <
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* Change background on mouse-over */
.navbar a:hover <
background: #ddd;
color: black;
>

/* Main content */
.main <
margin-top: 30px; /* Add a top margin to avoid content overlay */
>

Как создать фиксированное нижнее меню

Чтобы создать фиксированное нижнее меню, используйте position:fixed и bottom:0 :

Пример

/* The navigation bar */
.navbar <
position: fixed; /* Set the navbar to fixed position */
bottom: 0; /* Position the navbar at the bottom of the page */
width: 100%; /* Full width */
>

/* Main content */
.main <
margin-bottom: 30px; /* Add a bottom margin to avoid content overlay */
>

Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.

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

Давайте рассмотрим как все можно реализовать.

Все будет выставляться с обычного CSS, возьмем за основу рабочий.

Вся суть его закрепление зависит от этого.

position:fixed; — отвечает за функциональность прокручивание сверху.

top:0px; — Задаем или указываем, где запросы будет по умолчанию самого вверх.

left:0px; — Выполняем сдвиг по левую сторону.

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

Сейчас я расскажу, как можно сделать фиксированное меню средствами jQuery. Как оказалось, это несложно — код состоит всего из нескольких строчек.

Вариант №1

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

Для начала нужно создать страницу.

Примерная схема блоков страницы (вариант №1)

При помощи CSS устанавливаем высоту «шапки» и создаем правила для блока с меню.

Теперь переходим к написанию скрипта на jQuery, который будет фиксировать меню вверху страницы при прокрутке.

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

Читайте также:  Постройте окружность вписанную в данный треугольник

Вариант №2 (Добавлено 18.02.2015)

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

При прокрутке страницы к началу, меню также «движется» вместе с содержимым, а когда достигает низа, оно фиксируется.

Примерная схема блоков страницы (вариант №2)

Нам потребуется следующий CSS-код.

Скрипт нижнего фиксированного меню на jQuery будет выглядеть немного иначе.

В начале создаем 3 переменных. В h_hght сохраняем значение высоты «шапки», которая занимает весь экран по высоте, в переменную h_nav помещаем значение высоты блока с навигацией. В переменной top будет хранится значение отступа прокрутки сверху, которое будет вычисляться при каждом скролле.

Далее в скрипте в зависимости от значения переменной top , блоку с навигацией устанавливается значение CSS-правил top или bottom .

Таким образом достигается поведение блока с меню, описанное выше.

Ну вот, собственно, и всё.

Я создал 2 простые странички для демонстрации работы обоих вариантов фиксированного меню. При желании вы сможете ознакомиться с ними:

Ссылка на основную публикацию
Установка и настройка ip камеры
Системы видеонаблюдения используются давно. Старые аналоговые решения были дороги и громоздки. Они требовали большого количества дорогостоящего оборудования, квалифицированных специалистов и...
Узнать историю своих предков по фамилии
История собственной семьи вызывает интерес каждого человека. Слушая семейные легенды, люди нередко увлекаются судьбой своих предков, составляют генеалогическое дерево, стараясь...
Узнать откуда пришло заказное письмо по номеру
Многим гражданам периодически приходит корреспонденция, сопровождаемая извещениями, в которых содержится скудная информация, не дающая представления об отправителе. В случае невозможности...
Установка и настройка операционной системы windows
Наши услуги УСТАНОВКА ОПЕРАЦИОННЫХ СИСТЕМ Определения: Операционная система (сокращенно ОС) – комплекс взаимосвязанных программ, предназначенных для управления ресурсами компьютера и...
Adblock detector