The Math for a progress bar

This is sort of how my page is set up. There are 7 “panels” and a footer. What I want to do is basically have the progress bars initial state start a little filled in. So e.g. if 1 panel is 820px, and divided by the entire page (7 panels + footer)…820/6272 = 0.13074. So start it basically 13% in, and let the page progress bar proceed normally. So if I scroll down the entire page, it’s completely filled in. If I’m at the top of the page, it’s 13% in.

So 50% down the page should have the progress bar at (50% + (13% / 2)). To give an idea of where my thinking is. The problem here is that I do not know how I’d modify the math. I have the idea in my head, that’s it. I think the getValue would be the place I go for this, right?

Not exactly what you are after (with the panel components)
but should work for your needs if % is required.
See: https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript
Or: https://codepen.io/achudars/pen/Cpast

1 Like

Thank you. I’m getting close. I have worked this into percentages. Now I just need to figure out how to change the starting point to 1 panel height

var getValue = function(){
      // const onePanelHeight = $(".panel").first().outerHeight();
      // return $(window).scrollTop();
      var scrollTop = $(window).scrollTop();
      var docHeight = $(document).height();
      var winHeight = $(window).height();
      var scrollPercent = (scrollTop) / (docHeight - winHeight);
      var scrollPercentRounded = Math.round(scrollPercent*100) * (getMax() / 100);
      return scrollPercentRounded;
    }

Got it! My brain hurts now. https://codepen.io/ryanreese09/pen/wvwgXOv

1 Like

Good work Ryan.:slight_smile:
(I once did a similar scroll indicator but was mainly from code I borrowed.)

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.