Position of Page - Fill a navigation bar on the side depending on position

Question

I know there are a lot of tools in place like scrollspy from bootstrap or watching what section or div you're on and highlighting linked navigation sections, but what I'm looking for is slightly different. Is there a jQuery method that calculates the position on the page so I can show where on the page you are in relation to the whole thing? I'm not fluent enough in jQuery.

Could I calculate the height of the page and divide it out of where I'm at on the page (current position) to give me a percentage so I can continuously show my position? Are there methods available to do this?

Answer 1

jQuery Methods: scrollTop() - returns current vertical position of scrollbar

height() - returns computed height for first matched element

You may want to show 100% when user is at end of page.

So you can use following to get percentage:

($(window).scrollTop()+$(window).height())/$(document).height()) * 100

Answer 2

Modifying the code from this answer: Cross-Browser Method to Determine Vertical Scroll Percentage in Javascript

You could do this. You would replace console.log with whatever code you need to update something on the screen.

$(function() {

  $(window).scroll(function() {
    var s = $(window).scrollTop(),
      d = $(document).height(),
      c = $(window).height();
    scrollPercent = (s / (d - c)) * 100;

    console.log("Current scroll percent: " + scrollPercent);
  });
});