?> Красивый индикатор прокрутки (Progress Bar) — статья на itProger | Новости про операционные системы

Красивый индикатор прокрутки (Progress Bar) — статья на itProger

Красивый индикатор прокрутки (Progress Bar)

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

Как можно сделать индикатор прокрутки (Progress Bar)?

Для реализации подобного нам придется использовать скрипт, написанный на , поэтому первым делом необходимо подключить сам jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
После этого напишем сам скрипт, который будет создавать наш Progress Bar:
$(window).scroll (function () {
 var ratio = $(document).scrollTop () / (($(document).height () - $(window).height ()) / 100);
 $("#progress").width (ratio + "%");
});
Сам индикатор будет отображаться в div'е с идентификатором progress. Итак, создадим следующий HTML код:
<div id="cont">
 <div id="progress"></div>
</div>
Осталось только добавить стили ко всему этому. Минимальный набор стилей:
* {
 margin: 0;
 padding: 0;
}

#cont {
 width: 100%;
 position: fixed;
 top: 0;
 bottom: 0;
 height: 2px;
 z-index: 9999;
}

#progress {
 background: #ED5E42;
 width: 0%;
 height: 2px;
}
Если хотите проверить работу на пустой странице, то добавьте этот стиль, чтобы у вас была прокрутка: html { height: 2500px }.
Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

Оставить комментарий

Вы должны быть авторизованы, чтобы разместить комментарий.