Vertical progress bar based on scroll position

Hi all,

a client asked me to build something like that: https://unlimited-elements.com/unlimited-timeline-widget-for-elementor/

The timeline itself is not a problem, but I struggle really hard to get this progress bar working on scroll. I use Alpine.js intersect:enter.margin.-50%.0 to change the background color of those dots when they move above the viewport center.

Any idea how I could do that scrolling progress bar?

carstenjaksch

2 years ago

Best Answer

Level 8

I finally managed to solve it. This is the complete Alpine component, if anyone is interested:

<div class="progress" :class="active ? 'active' : ''" x-data="{ active: false, height: 0, handleScroll() { if (this.active) { var top = $el.getBoundingClientRect().top; var viewportCenter = window.innerHeight / 2; this.height = `${viewportCenter - top}px`; } } }" x-intersect:enter.margin.-50%.0="active = true;" x-intersect:leave.margin.-50%.0="active = false" @scroll.window="handleScroll">
  <div class="dot"></div>
  <div class="line" :style="{ height }"></div>
</div>

Could be enhanced though: Performance maybe and set height on load.

1 like

Please or to participate in this conversation.