スクロールで動くプログレスバーの挙動がおかしい

前提・実現したいこと

スクロールで動くプログレスバーをjQueryで実装しています。
エラーも出ておらず、とりあえず動いてはいるのですがどうも挙動がおかしいです。

最終的には、

画面表示時の一番上にいるときはプログレスバー100% → スクロールし始めたら0からスタート → スクロールに合わせてプログレスバーも一緒に動く → スクロール終了するとプログレスバーが100%になる。

といった感じにしたいです。

発生している問題・エラーメッセージ

コンソールエラーは現在発生していません。

発生している問題はスクロールの最後の方になると、プログレスバーはまだ80%くらいなのに画面の下に到達してしまいます。下に到達すると100%になるようになっているので、80%〜100%に一気にぱっと進んでしまいます。

該当のソースコード

HTML
1<progress id="js-progress-bar" class="progress-bar" max="100" value="100"></progress>

CSS
1.progress-bar {
2    position: fixed;
3    transform: rotate(90deg);
4    top: 28vw;
5    left: -7vw;
6    width: 25%;
7    height: 1px;
8    z-index: 1;
9    -webkit-appearance: none;
10    -moz-appearance: none;
11    border: none;
12    background-color: #eee;
13  }
14
15  .progress-bar::-webkit-progress-bar {
16    background-color: #eee;
17  }
18
19  .progress-bar::-moz-progress-bar {
20    background-color: #111;
21  }
22
23  .progress-bar::-webkit-progress-value {
24    background-color: #111;
25  }
26

JS
1jQuery(function () {
2  jQuery(window).on("scroll", function () {
3    body = jQuery("body");
4
5    if (body) {
6      win = jQuery(window);
7      windowHeight = win.height();
8      scrollTop = win.scrollTop();
9      scrollbottom = scrollTop + windowHeight;
10
11      bodyHeight = body.outerHeight();
12      bodyTop = body.offset().top;
13      bodyBottom = bodyTop + bodyHeight;
14
15      progressTop = scrollTop;
16      progressBottom = scrollbottom;
17
18      progress = (progressTop / progressBottom) * 100;
19
20      progressBar = jQuery("#js-progress-bar");
21
22      if (scrollbottom > windowHeight && scrollbottom < bodyBottom) {
23        progressBar.attr("value", progress);
24      } else {
25        progressBar.attr("value", 100);
26      }
27    }
28  });
29});