Advanced Search

Return to Snippet

Revision: 61517
at December 20, 2012 02:36 by adrianparr
Initial Code 
<!DOCTYPE html>
<html lang="en">

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

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

		<script>


			$(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>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

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

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
HTML5 Scrollbar Percentage Position using JavaScript

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
html5

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
HTML