Result

jQuery

$(document).ready(function() {
  const win = $(window);
  const doc = $(document);
  const progressBar = $('progress');
  const progressLabel = $('.progress-label');
  const setValue = () => win.scrollTop();
  const setMax = () => doc.height() - win.height();
  const setPercent = () => Math.round(win.scrollTop() / (doc.height() - win.height()) * 100);
  
//プログレスバー
  progressLabel.text(setPercent() + '%');
  progressBar.attr({ value: setValue(), max: setMax() });

  doc.on('scroll', () => {
    progressLabel.text(setPercent() + '%');
    progressBar.attr({ value: setValue() });
  });
 
  win.on('resize', () => {
    progressLabel.text(setPercent() + '%');
    progressBar.attr({ value: setValue(), max: setMax() });
  })
});

見出しの固定はJSではなくCSSのposition: sticky;が使われています

html

<article>
  <div class="article-title">
    <h1>六号記</h1>
    <div class="progress-wrapper">
      <div class="progress-label"></div>
      <progress></progress>
    </div>
  </div><img src="https://picsum.photos/500/300"/>
  <p>どうにもならぬことを、ひとりぶつぶつ云つてもしようがない、と思ふやうになつてゐることは事実である。誰でも考へてゐるやうなことを、わざわざ口に出して云ふのは、野暮の骨頂だ、といふ風にも教へられてゐる。が、しかし、どうにもならないとは、一体、いつからきまつてしまつたのであらう？　当り前でないことが当り前で通るやうになつたのは、誰もが考へてゐるだけで、公然とそれを云はないからではないかと、私は近頃しきりにそそのかされるやうな気持になつて来た。</p>
・
・
・
</article>

via

Sticky Title/Page Progress Bar