Scrolling Progress Bar on Fixed Header

Posted by on Dec 1, 2013 in Code Snippets, Web Development | No Comments

Came across this gem on the 19daysofjapan.com website. If you look closely at the top of the header of the page, you’ve see a a small red line. As you scroll down it grows from left to right. You guessed it, a progress bar. Thought this was clever so I popped the hood to take a closer look on how this was being done.

<div id="scroll-progress" style="width: 0%;"></div>
#scroll-progress {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background: #dc143c;
}
// Scroll Progress
 $(window).load(function() {
  var scrollProgress = $('#scroll-progress');
   $(window).scroll(function () {
    var offset = $(document).scrollTop(),
    pageHeight = $('#content').height(),
    scrollProgressAmount = (offset*100/pageHeight) < 100 ? (offset*100/pageHeight) : '100';

    scrollProgress.stop().animate({ width: scrollProgressAmount + '%' }, 200);
   });
 });

What this basically does is that it takes your current position on the page as you scroll down, then calculates and increase the width of the progress bar at the top of the page. This obvious works awesome with the header staying fixed. It also works pretty well in it’s responsive view.

Some might argue its, I feel like a technique like this as a nice touch only enhances the user experience.

Leave a Reply