How to add horizontality progress bar on vertical scroll in jQuery?

Add horizontality progress bar on vertical scroll in jQuery

 <div id="scrollBar"></div> 

<div class="on_scroll_bx"></div> 

<script>

(function($) {

    $(document).ready(function(){

        var winHeight = $(window).height();

        var $scrollBar = $('#scrollBar');

        //var $progressLabel = $('.et-progress-label p span');   

        var $postContent = $('.on_scroll_bx');

        $scrollBar.css('width', 0);

       // $progressLabel.html('0%');

        

        $(window).scroll(function(){

            var postContentHeight = $postContent.height();          

            var postContentStartPosition = $postContent.offset().top;

            var winScrollTop = $(window).scrollTop();

            var postScrollTop = postContentStartPosition - winScrollTop;

            var postScrollableArea = postContentHeight - winHeight;

            var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100);

            if (postScrollTop > 0) {

                $scrollBar.css('width', 0);

               // $progressLabel.html('0%');

            } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) {

                $scrollBar.css('width', (postScrollPercentage + '%'));

              //  $progressLabel.html( Math.round(postScrollPercentage) + '%');

            } else if (postScrollTop < -postScrollableArea) {

                $scrollBar.css('width', '100' + '%');

               // $progressLabel.html('100%');

            }

        });

    });

})( jQuery );

</script>