Recipe - Add a Scroll Progress Bar

Skill level: Beginner

Organization: Kevin Rutledge

Requires Rock: 1.6.7

---

{# strip images & classes from the HTML but otherwise leave structure #}

So you have some long blog posts and you want to give some indication to your readers who long it is and how much more they have to go.  With a site leve html block with the following code, you can add a scroll progress indicator every page on your site. Or you can add the code to an individual page 

Add an html block with the following content at the site level.

<style>

#scroll-indicator {
    height: 5px;
    position:fixed;
    top:0;
    left:0;
    width:0%;
    background-color:purple;
    z-index:99999;
}
</style>

<div id="scroll-indicator"></div>

<script>

    $(window).scroll(function(){
    $('#scroll-indicator').stop(true, true).show().fadeOut();
    let wintop = $(window).scrollTop(), docheight = 
    
    $(document).height(), winheight = $(window).height();
    let scrolled = (wintop/(docheight-winheight))*100;
    
    $('#scroll-indicator').css('width',(scrolled + '%'));
})


</script>

Screenshots

• /GetImage.ashx?guid=9c51aa77-6b37-4e9a-bd0b-f14221e0fe61