jQuery addClass example

Change class name on click in jQuery

by gagan_manda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.umd.min.js"></script>
<div id = "progressBar"></div>

CSS

#progressBar {
    height: 5px;
    background-color: cyan;
    width: 0px;
    position: fixed;
    left: 0;
}

body {
  height : 5000px
}

JavaScript

$(window).scroll(function() {

var scrollPercent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100;

    $('#progressBar').css('width', scrollPercent +"%"  );

});