<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>

<div class="progress-bar-container">
    <div class="progress-bar"></div>
    <div class="progress-text">1/10</div>
</div>
        html,
        body {
            margin: 0;
        }

        .item {
            text-align: center;
            font-size: 50px;
        }

        .item:nth-child(odd) {
            background: darkseagreen;
            height: 250px;
            line-height: 250px;
        }
        .item:nth-child(even) {
            background: skyblue;
            height: 500px;
            line-height: 500px;
        }

        .progress-bar-container{
            position: fixed;
            width: 100%;
            bottom: 0;
            height: 25px;
            background: #ccc;
        }

        .progress-bar{
            position: absolute;
            width: 0;
            height: 100%;
            background: lightyellow;
            transition: width 0.3s ease-in;
            z-index: -1;
        }

        .progress-text{
            text-align: center;
            line-height: 100%;
        }
    var $items = $('.item')
    var $progress = $('.progress-bar')
    var $progressText = $('.progress-text')

    var windowHeight = $(window).height();
    var documentHeight = $(document).height();

    var length = $items.length

    function setProgress (index) {
        $progress.width((index / length * 100) + '%')
        $progressText.text(`${index}/${length}`)
    }

    var update = function () {
        console.log('update')
        var windowScrollTop = $(window).scrollTop();
        var currentHeight = windowScrollTop + windowHeight

        if (windowScrollTop === 0) {
            return setProgress(1)
        }

        var index
        for (var i = 0; i < $items.length; i++) {
            var $item = $($items[i])
            if (currentHeight > $item.offset().top) {
                index = i
            }
        }
        setProgress(index + 1)
    }

    throttle = function (func, delay) {
      var timer
      return function () {
        var context = this
        if (!timer) {
          timer = setTimeout(function () {
            func.apply(context, arguments)
            timer = undefined
          }, delay || 1000 / 24)
        }
      }
    }

    $(window).on('scroll', throttle(update))

    update()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js