Scrolling Progress Bar

A fixed, horizontal indicator of scroll progress.

HTML

<div id="content" class="content scroller">
    <p>Today I learned this is a real place, tho more lush than the OC. Oh, yeah, the guy in the the $4,000 suit is holding the elevator for a guy who doesn't make that in three months. Come on! Ah, it is a rock, though. Should beat everything. Gob: There's not a lot of logic to it.</p>

    <p>Got a big ass room at the travelodge. What a fun, sexy time for you. Boy, I sure feel like a Mary without a Peter and a Paul. Even though sooooo many people in this office are begging for it. The Man Inside Me seems well reviewed.</p>

    <p>Ann certainly has a great deal of Mass. Now, do you wanna steer, or are you too old to sit on your Pop's lap and drive? She's a girl, I need to teach her how to be a woman. Within her lies a queen. Let me out that queen. Oh please. They didn't sneak into this country to be your friends. But where did the lighter fluid come from? Here he comes. Here comes John Wayne. Uncle Gob… was Aunt Lindsay ever pregnant? Yeah, sure, dozens of times. Look, you are playing adults…with fully formed libidos, not 2 young men playing grab-ass in the shower.</p>

    <p>You were just a turd out there, you know? You couldn't kick, and you couldn't run, you know? You were just a turd. You just made a fool out of yourself in front of T-Bone. It walked on my pillow! My brother wasn't optimistic it could be done, but I didn't take "wasn't optimistic it could be done" for an answer. It was the first taste of alcohol Buster had since he was nursing. It looks like you've been looking for dragons… in the future.</p>

    <p>You burn down the storage unit? Oh, most definitely. Everyone's laughing, and riding, and cornholing except Buster.</p>

    <p>Can't a guy call his mother pretty without it seeming strange? Amen. And how about that little piece of tail on her? Cute! No, Pop-pop does not get a treat. I just bought you a f**king pizza.</p>

<p>I need a tea to give my dingle less tingle. Oh, I'm sorry, I forgot… your...

CSS

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding:0;
    margin:0;
}

.content {
    font-size: 2em;
    display: inline-block;
    width: 60%;
    border-right: 2px solid #ccc;
    padding: 1em;
}

.content p {
    margin-bottom: 1em;
}

.progress-container {
    position: fixed;
    display: inline-block;
    width: 35%;
    border: 1px solid #ccc;
    height: 50px;
    margin: 2.5%;
}
.progress {
    width: 0%;
    height: 100%;
    background-color: #f90;
    color: #fff;
    text-align: center;
}

JavaScript

var s, ScrollWidget = {
        settings: {
            content: document.getElementById('content'),
            progressBar: $('#progress')
        },
        
        init: function() {
            s = this.settings;
            this.onResize();
            this.onScroll();
        },
        
        getPos: function() {
            var contentHeight = s.content.scrollHeight;
            var viewportHeight = window.innerHeight;
            var scrollPos = $(document).scrollTop();
            var scrollMax = contentHeight - viewportHeight;
            var scrollPercent = (scrollPos / scrollMax);
            progressMax = $('#progress-container').width();
            $(s.progressBar).width(progressMax*scrollPercent);
        },
        
        onResize: function() {
            window.addEventListener('resize', ScrollWidget.getPos);
        },
        
        onScroll: function() {
            window.addEventListener('scroll', ScrollWidget.getPos);
        }
    };
    
    ScrollWidget.init();