В этом материале рассмотрим один актуальный метод, как индикатор прокрутки, которые отлично используется на многих сайтах, для того, чтоб показать прогресс прокрутки для пользователей или гостей сайта. Которые начиная крутить вниз или вверх страницу сразу замечают индикатор, что идет по правую сторону.
Изначально можно понимать, где вы находитесь на странице, так как индикатор все прекрасно показывает, хоть идет в горизонтальном положение. Этот метод используется на все большем количестве сайтов, так как он обеспечивает контекстное понимание инвестиций, необходимых для потребления определенной страницы.
Также рекомендую посмотреть красивый индикатор прокрутки на CSS + JS, который по своим функциям почти схожий, только работает при помощи скрипта, но и безусловно какие то небольшие отличие присутствуют.
Приступаем к установке:
HTML
Код
<header>
<h1>Название страницы</h1>
</header>
<section>
<h2>ZorNet.Ru - портал для вебмастера</h2>
<p>Здесь страница с описание или изображением.</p>
</section>
CSS
Код
html, body {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
height: 90px;
background: url(http://zornet.ru/ABVUN/Abas/05.png) repeat #3c3c3c;
font-family: Tahoma, Geneva, sans-serif;
color: #efefef;
padding: 7px 7px 7px 7px;
}
section {
margin-top: 135px;
}
p {
line-height: 32px;
}
@supports (height: 100vh) {
body {
background: linear-gradient(to right top, aqua 50%, #f1eaea 50%);
background-size: 100% calc(100% - 100vh + 100px);
background-repeat: no-repeat;
}
body:before {
content: '';
position: fixed;
top: 112px;
bottom: 0;
width: 100%;
z-index: -1;
background: #f3f0f0;
}
}
Также как заметили идет вверх сайта, что по умолчанию сделан в темном оттенке, плюс на сам фон наложена сетка, это делается для того, чтоб как можно оригинальнее создать страницу под материал, который на ней находится.
Демонстрация
