Scroll Progres Bar - 2

Scroll Progres Bar - 2 Inspiration URL: http://www.avclub.com/review/the-golem-106333

HTML

<header>
    <div class="filler-space">
        Filler Space
    </div>
    <div class="toolbar">
        <div class="current-article">
            <div class="progress-bar"></div>
            My article
        </div>
    </div>
</header>

CSS

body {
    padding:0 10px;
    height: 1000px;
}

.filler-space {
    background-color: yellow;
    border:1px solid #000000;
    height: 140px;
}

.toolbar {
    border: 1px solid black;
}

.current-article {
    font-weight: 600;
    height: 100%;
    line-height: 40px;
    overflow: hidden;
    width: 100%;
    z-index: -1;
}

.progress-bar {
    position: absolute;
}

.prog .progress-bar {
    background: none repeat scroll 0 0 #F2F4F7;
    bottom: 0;
    height: 100%;
    left: 0;
    margin: 0 -10px 0 -10px;
    overflow: hidden;
    right: 0;
    top: 0;
    transition: width 0.1s ease 0s;
    z-index: -1;
    width: 100%;
}

JavaScript

var $toolbar = $('.toolbar');
var $window = $(window);
var $header = $('header');

$(document).scroll(function() {
    var scrollTop = $window.scrollTop();
    if ( scrollTop > 150) {
    $toolbar.css({
        'position' : 'fixed',
        'top' : 0,
        'width':$header.width()
    });

    $header.addClass('prog');
}
else {
    $toolbar.css({
        'position' : 'static',
        'top' : 0
    });
    $header.removeClass('prog');
}
});