scroll progress indicator 2
by lovromar
HTML
<progress id="progressbar" value="0"></progress>
<br />
<br />
<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
<div id="horizontal">test</div>
CSS
progress {position:fixed; top:15px;}
JavaScript
$(document).ready(function () {
$(window).scroll(function () {
var s = $(document).scrollTop(),
d = $(document).height() - $(window).height();
$("#progressbar").attr('max', d);
$("#progressbar").attr('value', s);
});
});