Scroll Tabs (Divi)

Navigation beside panels that change as the visitor scrolls, for Divi 5. It works in two ways: inside a box that snaps panel by panel (wheel, trackpad, touch and keys all native, and nothing is hijacked), or pinned to the page while the panels slide, fade, stack or zoom. Each panel is a Panel child module. On phones they become plain stacked sections.

1. Inside a box

Scrolling: Inside a box, 440 px high · list navigation on the left with an active bar and numbers · Font Awesome icons and subtitles · counter and progress bar · text panels. Scroll inside the box, or click a step.

2. Pinned to the page

Scrolling: With the page — the section pins 80 px from the top (below Divi’s header) while each panel slides up, 70 vh of scrolling per panel · pill navigation on the right · image panels, each with its own background colour · the address bar follows the panel (#hoodies, #tees …).

3. Stacking cards, dots on top, and a Divi layout

Pinned with Stack (each card piles on the last) · dot navigation on top · counter and progress · panels with their own background photos and dark text · the last panel is a Divi Library layout (a row with a Text and a Button module) · content centred.

4. Finished design

A dark knowledge base: inside a 420 px box, a list navigation with a gold active bar on a navy side panel (32 px padding, 20 px radius), links slate → white on hover → gold when active with a faint background, a gold counter, a slim track, panels in dark slate with 17 px light text, radius 20 px, 32 px gap.