[Support request] Progress bar in blog posts

[Mats]

hubspotblog

Let’s say I’d want to do like great artists do and steal the idea of the progress bar that you can see on the above site.

How would I go about it?

TIA

[David]

Hi there,

this method is quite simple to follow:

https://www.w3schools.com/howto/howto_js_scroll_indicator.asp

In GP i would:

1. Create a new Hook Element
1.1 Add the HTML and JS to its content:

<div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
</div>

<script>
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

1.2 Select the inside_navigation hook
1.3 Set Display Rules to Entire Site.

2. Enable Sticky Navigation in Customizer

3. Add the CSS:

.progress-container {
  width: 100%;
  height: 2px;
  order: 5;
}

.progress-bar {
  height: 2px;
  background: orange;
  width: 0%;
}

[Mats]

Thanks David!

This is great!

Is it possible somehow to make the progress-bar the width of the screen? Now it’s inside the content container.

Also, nit-picking really, but do you think it’s possible to move the progress bar below the sticky menu, as opposed to above it?

Thanks again!

[David]

In Customizer > Layout > Primary Navigation set the Navigation Width and Inner Navigation Width to Full. And add this CSS rule:

@media (min-width: 769px) {
    .inside-navigation {
        display: flex;
        flex-direction: column;
    }
}

[Julia]

Hello,

Thank you very much for this tutorial! Would you be able to help me set the height to the end of the blog post? At the moment it ends at the bottom of the footer.

[David]

Hi there,

not sure but try changing this line:

var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

to:

var height = document.documentElement.scrollHeight - document.documentElement.clientHeight - 250;

The 250 needs to be adjusted to the height of the footer.
If you want to share a link to the site then i can take a look …. but you will need to consider this value may change depending on screen size which isn’t something that can be easily fixed.

[Julia]

Thank you for your quick reply! I had a workaround that was similar but not quite right – your suggestion is perfect.

Thanks 🙂

[David]

Glad to be of help

[Author]

Posts