• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Сделать фиксированное меню при прокрутке (Создание фиксированной панели навигаций при помощи CSS)
Сделать фиксированное меню при прокрутке
Kosten
Дата: Воскресенье, 2019-10-20, 20:37 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25120
Награды: 57


Здесь рассмотрим простой и актуальный способ, это как создать фиксированную панель навигации с прокруткой с помощью CSS. Ранее, чтобы создать панель навигации, которая стала бы фиксированной при прокрутке, не было никакого способа сделать это без Javascript.

Процесс работал, но у него были свои глюки, особенно проблемы с производительностью — никогда не стоит слушать событие onscroll. В небольших случаях вы можете уйти, в более сложных случаях приложение начнет заикаться. Но сейчас все изменилось в современных браузерах, где можете создать липкий элемент, используя только CSS.

При открытие страницы или сайта:



Когда расстояние элемента больше 15 пикселей от верхней части экрана, оно будет вести себя как обычный элемент. Во время прокрутки, когда расстояние становится 15 пикселей от вершины, оно становится фиксированным.

HTML

Код
<div id="logo-pomocu-kebales"></div>
<div id="nav-pomocu-kebales">Здесь размещаем навигацию по сайту</div>
<div id="main-pomocu-kebales"></div>

CSS

Код
#logo-pomocu-kebales {
    background-color: #bdc3c7;
    height: 100px;
}

#nav-pomocu-kebales {
    background-color: #2980b9;
    height: 60px;
    line-height: 60px;
    color: white;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

#main-pomocu-kebales {
    background-color: #ecf0f1;
    height: 2000px;
}

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

Демонстрация
Прикрепления: 8283396.png(5.3 Kb) · nudsam.zip(2.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Сделать фиксированное меню при прокрутке (Создание фиксированной панели навигаций при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: