如何在DIV内到达底部时隐藏阅读进度条？

Question

我为我的 WordPress 博客制作了这个阅读进度条，它在特定的 DIV 中效果很好，但我尝试找到一种方法，当访问者滚动并到达该 DIV 的底部时隐藏它。

这是我的代码：

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;
}

我在 Codepen

上做了一个演示

我尝试过类似的方法，但是进度条一直在闪烁。

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

有什么想法吗？谢谢！

Answer 1

解决方案是像这样修改 JS 第 7 行（该死！太简单了😅）：

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