Индикатор прокрутки страницы
Довольно просто скрипт добавляющий некий интерактив на страницы сайта — индикатор прокрутки страницы.
Для начала — пример работы:
Установка предельно простая:
1. Разметка html — вставляем внизу страницы — перед тегом < /body >
|
1 2 3 4 5 |
<progress value="0"> <div class="progress-container"> <span class="progress-bar"></span> </div> </progress> |
2. Добавим стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
progress{ position:fixed; left:0; top:0; width:100%; height:5px; -webkit-appearance:none; -moz-appearance:none; appearance:none; border:none; background:transparent; color:#F00; } progress::-webkit-progress-bar{ background:transparent; border-radius:5px; } progress::-webkit-progress-value{ background:#F00; border-radius:5px; } progress::-moz-progress-bar{ background:#F00; border-radius:5px; } .progress-container{ width:100%; background:transparent; position:fixed; top:0; left:0; height:5px; display:block; } .progress-bar{ background:#F00; width:0%; display:block; height:inherit; } |
3. Последнее, что нам осталось сделать — Js + jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function() { $(window).on("scroll resize", function() { var o = $(window).scrollTop() / ($(document).height() - $(window).height()); $(".progress-bar").css({ "width": (100 * o | 0) + "%" }); $('progress')[0].value = o; }) }); </script> |
Исходники + демо:
Скачать: Page_scroll_indicator
Скачано: 114, размер: 1.7 KB, дата: 22 Фев. 2019
