Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.12.2022, 22:58
Интересующийся
Отправить личное сообщение для sega1821 Посмотреть профиль Найти все сообщения от sega1821
 
Регистрация: 30.10.2020
Сообщений: 29

Скролл с индикатором для блока
Добрый день, нужно сделать заполняющуюся полосу при прокрутке как в блоке этапов работ.
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

индикатор прокрутки блока
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>

Последний раз редактировалось рони, 24.12.2022 в 13:28.
Ответить с цитированием
  #3 (permalink)  
Старый 24.12.2022, 02:01
Интересующийся
Отправить личное сообщение для sega1821 Посмотреть профиль Найти все сообщения от sega1821
 
Регистрация: 30.10.2020
Сообщений: 29

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Требуется программист на QML для создания интерфейса клиентской программы для общения m.simakov Работа 0 11.02.2016 18:07
Класс .active для активного блока div dima_riabets Элементы интерфейса 3 02.12.2015 22:54
наследование функции для вложенного блока hellbeast92 jQuery 7 10.10.2013 13:39
Userscript для скрытия блока MustDie Firefox/Mozilla 12 02.08.2010 14:54