DS Process Pattern – Interactive Features
A scroll-spy navigation pattern with stacking cards effect. Fully automatic behavior.
Desktop Features
- Sticky Sidebar: Left navigation stays fixed while scrolling
- Scroll-Spy: Active nav item updates based on which section is in view (25% trigger line from top)
- Smooth Scroll: Clicking any nav item scrolls to that section
- Stacking Cards: Cards use
position: sticky with staggered top values (32px, 48px, 64px, 80px, 96px) creating a deck-of-cards effect as you scroll
Mobile Features (below 900px)
- Sidebar navigation hidden entirely
- Cards display full-width with ultralight gray background
- Stacking effect preserved for visual interest
- Two-column lists collapse to single column at 600px
Structure
- Each card has an
id attribute (discovery, strategy, build, launch, optimize)
- Nav items link via
href to these IDs
- Z-index decreases (5→1) so earlier cards layer on top
Customization
- Add/remove steps by duplicating cards and nav items
- Update IDs and hrefs to match
- Adjust
--card-top values for different stacking offsets
- Change trigger line in JS (currently 25% from top)