Div Percentage of Scroll

This gets the percentage of the div scrolled of a specific div for use in a variable anywhere

by idavidcastellanos

HTML

<h1>
david
</h1>

<div class="bar-long"></div>
<div class="post">
    <div class="content"></div>    
</div>

CSS

.bar-long {
    height: 5px;
    background-color: #009ACF;
    width: 0px;
    z-index: 1000;
    position: fixed;
    top: 20px;
    left: 0;
}
.post {
    position:fixed;
    overflow-x:hidden;
    top:30px;
    height:200px;
    width:200px;
    background-color:#EEE;
}

.content {
    width:100%;
    height:3000px;
}

JavaScript

$('.post').scroll(function() {
    
    var currY = $(this).scrollTop();
    var postHeight = $(this).height();
	var scrollHeight = $('.content').height();
    // Current percentual position
	var scrollPercent = (currY / (scrollHeight - postHeight)) * 100;

    $('.bar-long').css('width', scrollPercent +"%"  );

});