Javascript-форум - Индикатор прокрутки страницы

Помогал сделать Прогресс бар и не только, потом смотрю Reading Position Indicator там тоже самое но подробно

получилось так ... код свой ... css из статьи :write:

<!DOCTYPE HTML>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    height:1600px;
  }

  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;
  }
  </style>
  <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>
</head>
<body>
<progress value="0">
   <div class="progress-container">
    <span class="progress-bar"></span>
  </div>
</progress>
</body>
</html>

кому интересно есть плагин для такой индикации (выбор внизу или вверху страницы, цвет)https://github.com/jeremenichelli/scrollProgress