Question

I was recently asked how to create a horizontal page height progress bar with jQuery, similar to the one here: http://www.piccsy.com/investors/ . I’ve looked around and have been unable to find anything, both through Google searches and the old jQuery plugin library.

Does anyone know how this effect can be achieved? I’d assume it’d have something to do with $(‘#containerDiv’).scrollTop(), but I have zero familiarity with that method.

Answer 1

You were correct with using scrollTop();

This is an example using the window height, but could easily be applied to a container div.

$(document).scroll(function(){
var theDistance =  $(window).scrollTop(),
      theHeight = $(document).height(),
  heightPercent = theDistance/theHeight*100;

  console.log(heightPercent);

});

see example: http://jsbin.com/ikakim/1/edit

This will log to your browser console the distance you are from the top of the scroll area in percent. So if you are half way down, heightPercent will be “50” – from here you can set a horizontal line width or something to be 50% of its total size.

Note that there may be some issues when hitting the bottom (currently logs ~ 97 max) due to the scrollbar height.