在一个页面中读取每篇文章的进度条

Question

如何将整个页面的进度条更改为一页中的每篇文章。尝试来自（Reading Position Indicator based on DIV instead of the whole page）的代码，但它仅适用于第一个div。

$(document).on('ready', function() {
  var winHeight = $(window).height(),
    docHeight = $(document).height(),
    progressBar = $('progress'),
    max, value;

  /* Set the max scrollable area */
  max = docHeight - winHeight;
  progressBar.attr('max', max);

  $(document).on('scroll', function() {
    value = $(window).scrollTop();
    progressBar.attr('value', value);
  });
});

progress {
  /* Positioning */
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 3px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Get rid of the default border in Firefox/Opera. */
  border: none;
  /* Progress bar container for Firefox/IE10+ */
  background-color: transparent;
  /* Progress bar value for IE10+ */
  color: #E60000;
}

progress::-webkit-progress-bar {
  background-color: transparent;
}

progress::-webkit-progress-value {
  background-color: #E60000;
}

progress::-moz-progress-bar {
  background-color: #E60000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress value="0"></progress>

Answer 1

如果我很了解，您需要更改multipe进度条。 希望这对您有帮助：

$('progress').each(function(index,elem) {
    elem.attr('value', value);
});

对'min'和'max'执行相同操作。