Форум

sega1821 · #1 (**permalink**) 23.12.2022, 22:58

Добрый день, нужно сделать заполняющуюся полосу при прокрутке как в блоке этапов работ.
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 + '%');

});

Помогите пожалуйста, как можно реализовать скрипт, для отслеживания прокрутки высоты и при достижении точек добавлять класс

рони · #2 (**permalink**) 24.12.2022, 01:25

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>

sega1821 · #3 (**permalink**) 24.12.2022, 02:01

Большое спасибо, с наступающим Новым годом

Форум

Справочник

Discord чат

Курсы javascript