Posted By

adrianparr on 12/20/12

Tagged

html5

Versions (?)

Last Edited at 12/20/12 02:36am

Statistics

Viewed 998 times

Favorited by 1 user(s)

Related snippets

HTML5 Scrollbar Percentage Position using JavaScript

/ Published in: HTML

This JavaScript gets you the percentage position of the browser's scrollbar.

Highlighted TextExpand

<!DOCTYPE html>
<html lang="en">

<head>
		<meta charset="utf-8">
		<title>Get Scrollbar Percentage</title>

$(document).ready(function() {

$(window).scroll(function(e){
					var scrollTop = $(window).scrollTop();
					var docHeight = $(document).height();
					var winHeight = $(window).height();
					var scrollPercent = (scrollTop) / (docHeight - winHeight);
					var scrollPercentRounded = Math.round(scrollPercent*100)/100;

$('#scrollPercentLabel>span').html(scrollPercentRounded);
				    repositionLabel();
				});
	   
				$(window).resize(function(){
					repositionLabel();
				});

function repositionLabel() {
					$('#scrollPercentLabel').css({
						position:'fixed',
						left: ($(window).width() - $('#scrollPercentLabel').outerWidth()) / 2,
						top: (($(window).height() - $('#scrollPercentLabel').outerHeight()) / 2) - $('#scrollPercentLabel').height()
					});
				}

repositionLabel();

});

</script>

<style>

body {
				background-image: url('http://subtlepatterns.com/patterns/crissXcross.png');
				margin: 0px;
				padding: 0px;
			}

#fakeHeight {
				height: 6000px;
				width: 1px;
			}

#scrollPercentLabel {
				font-family: Impact;
				font-size: 50px;
				color: #2B2B2B;
				background: rgba(255, 255, 255, 0.5);
				padding: 20px;
				position: absolute;
				top: 50%;
				left: 50%;
				box-shadow: 8px 8px 5px rgba(20, 20, 20, 1);
				border-radius: 15px;
			}

</style>

</head>

<body>
		<p id="fakeHeight"></p>
		<p id="scrollPercentLabel">scrollPercent: <span>0</span></p>
	</body>

</html>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.