Нужен progress bar для каждого блока с классом "article". Пример (
https://blog.sibirix.ru/2018/06/06/slow-death-of-IE/) . Мой код работает только с первым элементом с классом "article". Спасибо!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<header>
<nav></nav>
<progress value="0"></progress>
</header>
<div class="content">
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aut doloribus ex facere nostrum perspiciatis quae sapiente tempore veniam? Aliquam debitis dolorum hic nisi repellendus reprehenderit saepe tenetur voluptate voluptatem!
</p>
</div>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aut doloribus ex facere nostrum perspiciatis quae sapiente tempore veniam? Aliquam debitis dolorum hic nisi repellendus reprehenderit saepe tenetur voluptate voluptatem!
</p>
</div>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aut doloribus ex facere nostrum perspiciatis quae sapiente tempore veniam? Aliquam debitis dolorum hic nisi repellendus reprehenderit saepe tenetur voluptate voluptatem!
</p>
</div>
</div>
</body>
</html>
CSS:
progress {
/* Positioning */
position: fixed;
left: 0;
/* Dimensions */
width: 100%;
height: 4px;
/* Reset the appearance */
-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: #6554c0;
}
progress::-webkit-progress-bar {
background-color: transparent;
}
progress::-webkit-progress-value {
background-color: #6554c0;
}
progress::-moz-progress-bar {
background-color: #6554c0;
}
JS:
$(document).on('ready', function() {
var winHeight = $('.article').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);
});
});
Простой
Простой