Полоса прокрутки или же индикатор прокрутки это полезная вещь на любом сайте, так как она выглядит стильно и позволяет пользователю понять в какой части сайта он сейчас находится. К примеру, на нашем сайте тоже есть такая полоса и вы можете её заметить в самом верху страницы. Она увеличивается вместе с прокруткой самой страницы.
Как можно сделать индикатор прокрутки (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 }.Дополнительный стиль
Чтобы все выглядело еще лучше вы можете использовать градиент вместо простой заливки одним цветом весь блок. Для этого вы можете воспользоваться .
Индикатор полностью готов! Вам нужно немного подправить стили, чтобы он вписывался в общий дизайн вашего сайта, но это уже мелочи :)
Количество показов: 473
26 мая 2017