-
-
Save flocondetoile/188f4795e6f88cdd4350f1f90e302b9e to your computer and use it in GitHub Desktop.
jQuery snippet for making a progressbar for reading position in browser.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#progresswrapper { | |
position: fixed; | |
top: 0px; | |
height: 2px; | |
width: 100%; | |
z-index: 1000; | |
} | |
#progressbar { | |
top: 0; | |
position: fixed; | |
height: 2px; | |
width: 100%; | |
background: none; | |
} | |
progress:not([value]) { | |
display: none; | |
} | |
progress[value] { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
color: #ff0000; | |
background-color: #34a5c8; | |
border: 0; | |
} | |
progress::-webkit-progress-bar { background: none; } | |
progress::-webkit-progress-value { background-color: #34a5c8; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$('body').prepend('<div id="progresswrapper"><progress id="progressbar" value="0" max="100" ></progress></div>'); // Makes a CSS styleable div for the progressbar | |
$(window).scroll(function () { | |
var scvp = $(window).scrollTop(), // pixels on top hidden from view | |
dh = $(document).height(), // height of document window | |
dp = $(window).height(); // height of broswer window | |
scrollPercent = (scvp / (dh-dp)) * 100; | |
var position = scrollPercent; | |
$("#progressbar").attr('value', position); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment