Здесь рассмотрим простой и актуальный способ, это как создать фиксированную панель навигации с прокруткой с помощью 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;
}
Это потому, что панель навигации, которая является дочерней по отношению к внешнему контейнеру, что будет видна только тогда, когда родительский элемент видим. Как только пользователь прокручивает за пределы внешнего контейнера, он скрывается, и ребенок тоже скрывается.
Демонстрация
