Reading Progress Bar

A reading progress bar that fills as you scroll makes the experience better by giving you a visual indicator of where you are on the page, makes navigation more intuitive and fun.

CSS

/* ---------------------------------------------------------- */ /* Snippflow Reading Progress Bar */ /* ---------------------------------------------------------- */ #sf-reading-progress-bar {	position: fixed;	top: 0;	left: 0;	z-index: 9999;	width: 0%;	height: 5px;	background-color: #46A787;	margin: 0; } /* WP Admin Bar fix */ .admin-bar #sf-reading-progress-bar {	top: 32px; } @media screen and (max-width: 782px) {	.admin-bar #sf-reading-progress-bar {	top: 46px;	} } @media screen and (max-width: 600px) {	.admin-bar #sf-reading-progress-bar {	top: 0;	} }

jQuery for Reading Progress Bar

$(document).ready(function() { if ($('body').hasClass('single')) { var totalHeight = $('main').outerHeight(true); var footerHeight = $('footer').outerHeight(true); var windowHeight = $(window).height(); console.log(totalHeight); console.log(footerHeight); if (totalHeight > 0) { $('header').after('<div id="sf-reading-progress-bar"></div>'); $(window).scroll(function() { var scrollPosition = $(window).scrollTop(); var scrollableHeight = totalHeight + footerHeight - windowHeight; var progress = (scrollPosition / scrollableHeight) * 100; progress = Math.min(progress, 100); $('#sf-reading-progress-bar').css('width', progress + '%'); }); } } });