Is it possible to customize the progress bar for each individual article on a single page? I attempted to use code from (Reading Position Indicator based on DIV instead of the whole page), but it only seems to work with the first 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>