ページのスクロール位置に合わせて全体の進行状態をプログレスバーで表現するスクリプト

現在のページのスクロールした位置から、進行状態をプログレスバーで表示するスクリプト

1ページのコンテンツで現在どの程度までスクロールしているのかをプログレスバーで表示するスクリプトです。jQueryを使って、ページ全体の高さ、現在のスクロール位置等を取得して。その割合を元に、現在の進行状態をプログレスバーで表現している。YOUTUBEなどのサイトを開いた時にページ上部に表示されるような、あれをページのスクロール量に合わせて動くようにしたものです。テキストベースの読み物系のサイトに導入すると面白いかと思います

DEMO 表示

code

HTML

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href='http://fonts.googleapis.com/css?family=Merriweather:300,400italic' rel='stylesheet' type='text/css'>
 <link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>
</head>

<body>
<div id="progress"></div>

<div class="container">
  <h1>Title of This Killer Blog Post</h1>
  <span class="byline">Brett Smith&mdash;April 2, 2015</span>
  <p>Lorem Ipsum ・・・・・・・・・・・・・</p>
</div>
</body>

CSS

body {
  color: rgba(0,0,0, .85);
}

#progress {
  height: 4px;
  background-color: rgba(39, 174, 96,.75);
  position: fixed;
  top: 0;
  left: 0;
}

.container {
  width: 750px;
  max-width: 94%;
  margin: 125px auto 100px auto;
}

h1 {
  font-size: 42px;
  font-family: 'lato';
  margin-bottom: 32px;
}

p {
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: .2px;
  font-family: 'merriweather';
  margin-bottom: 2em;
}

.byline {
  color: lighten(black, 70%);
  font-size: 14px;
  font-family: "merriweather";
}

javascript（jQuery）

$(document).ready(function() {
    $(window).on('load scroll', function() {
    
        var docHeight = $(document).height();
        var windowPos = $(window).scrollTop();
        var windowHeight = $(window).height();
    var windowWidth = $(window).width();
        var completion = windowPos / (docHeight - windowHeight);
        
    if (docHeight <= windowHeight) {
      $('#progress').width(windowWidth);
    } else {
        $('#progress').width(completion * windowWidth);
    }
    
    });
});