Как постепенно увеличивать высоту блока в зависимости от прокрученной страницы?

Question

[Alekosh Akhosh]

Приветствую,
хочу также научиться делать, как сделано на сайте https://nft-peeps.webflow.io, но у меня с координацией очень плохо;
Пытался сделать условия, когда докручиваешь до нужной координата страницы - постепенно увеличивался высота...

Comments

[Илья]

Js скриптом узнаёшь высоту страницы, делишь на 100, получаешь размер одного процента высоты.
Узнаёшь высоту линии, делишь на 100.
Узнаёшь текущую позицию скролла, делишь на один процент высоты страницы.
Полученное умножаешь на один процент высоты линии и получаешь число процентов которое нужно закрасить.

[Ruslan]

А почему нельзя через прогресс бар это сделать?

[Alekosh Akhosh]

Илья, Можно пример? а то от слова совсем не выходит

[Alekosh Akhosh]

Ruslan, можно тоже пример?

Answer 1

[dicem]

Тут никакой JS не нужен

https://jsbin.com/caveqinuro/edit?html,css,output

Comments

[Alekosh Akhosh]

Так, это супер круто и хитро конечно, но как тогда нам сделать так, чтобы линия не выходила за пределы? в плане не нужно выходить за пределы, если достигнуто 100% (0%, 25%, 50%, 100% etc..)

[Alekosh Akhosh]

Кое-как сделал, но чувствую что сделал костыли;
Благодарю что помогли