Скролл с индикатором для блока
Добрый день, нужно сделать заполняющуюся полосу при прокрутке как в блоке этапов работ.
https://place-start.ru/uslugi/korpor...sajt-kompanii/ Есть такой скрипт, но заполнение полоски происходит относительно всего сайта, а не блока
$(document).ready(function() {
var element = document.documentElement,
body = document.querySelector('.stages-line'),
scrollTop = 'scrollTop',
scrollHeight = 'scrollHeight',
progress = document.querySelector('.stages-line__filling'),
scroll;
document.addEventListener('scroll', function() {
scroll = (element[scrollTop]||body[scrollTop]) / ((element[scrollHeight]||body[scrollHeight]) - element.clientHeight) * 100;
progress.style.setProperty('height', scroll + '%');
});
Помогите пожалуйста, как можно реализовать скрипт, для отслеживания прокрутки высоты и при достижении точек добавлять класс |
индикатор прокрутки блока
sega1821,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<style>
main {
max-width: 480px;
margin: 0 auto;
border: 1px solid red;
position: relative;
height: 700px;
}
.progress {
position: absolute;
width: 5px;
height: 0px;
top: 0px;
left: 240px;
background-color: #ff0000;
transition: all 0.1s ease;
}
body {
height: 3000px;
margin: 0;
}
p {
height: 30em;
}
</style>
<body>
<p></p>
<main>
<div class="percentage progress" id="percentage-value"></div>
<section class="block_text_2">
</section>
</main>
<p></p>
<script>
document.addEventListener("DOMContentLoaded", function() {
const div = document.querySelector("main"),
win = document.documentElement,
percentage = document.querySelector(".percentage");
const updateScrollPercentage = function() {
let Height = win.clientHeight / 2;
let { top, height } = div.getBoundingClientRect();
let min = top - Height < 0;
let max = top + height - Height > 0;
let percent = 0;
if (min && max) percent = Math.trunc(100 * (Height - top) / (height));
if (!max) percent = 100;
percentage.style.height = percent + "%";
}
window.addEventListener('scroll', updateScrollPercentage)
})
</script>
</body>
</html>
|
Большое спасибо, с наступающим Новым годом :)
|
| Часовой пояс GMT +3, время: 17:36. |