How to hide reading progress bar within a DIV when reaching the bottom of it?

Question

I made this reading progress bar (for my WordPress blog) that works great within a specific DIV, but I try to find a way to hide it when the visitor scroll and reach the bottom of that DIV.

Here is my code:

HTML

<div class="progress-bar"></div>
<header>HEADER</header>
<main class="content">Content</main>
<footer>FOOTER</footer> 

jQuery

$(window).scroll(function() {
  var content = $('.content');
  var postLength = content.height();
  var top = content.offset().top;
  var scroll = $(window).scrollTop() - content.offset().top;
  var progressbar = (scroll / postLength) * 100;
  if (progressbar >= 1) {
      $('.progress-bar').fadeIn();
    } else {
      $('.progress-bar').fadeOut();
    }
  $('.progress-bar').css('width',(progressbar + 5 )+ '%');
});

CSS

.progress-bar {
  background-color: #f00;
  position: fixed;
  left: 0;
  top: 0;
  height: 5px;
  width: 0;
  -webkit-transition: width .3s ease;
  transition: width .3s ease;
  z-index: 999;
}

I made a demo on Codepen

I've tried something like that, but the progress bar is blinking then.

if (progressbar <= 100) {
  $('.progress-bar').fadeOut();
} else {
  $('.progress-bar').fadeIn();
}

Any idea? Thanks!

Answer 1

The solution was to modify JS line 7 like this (Damn! So easy 😅) :

if (progressbar >= 1 && progressbar <= 100) {