Dan Powell

Dan Powell

← Back to home
Preview of Moving Menu Accent onScroll
View on CodePen ↗

Moving Menu Accent onScroll


Hiding the scrollbar can feel good from a design standpoint BUT signaling to a visitor where they are on a page critical UX--especially in the world of the now classic single page long scrolls.

This listens to the window's 'onscroll' event and based on a few simple JS measurements, sets the span accent's 'height' and 'right' styles.

The smoothness comes from a CSS transition!

This is a fun effect I've seen before but picked up at over at http://www.fullslate.com/

The (awesome) SVG illustration was borrowed from the awesome team over at https://undraw.co/

Didn't take the time to make mobile friendly so anything under ~764px looks screwy. No one uses the internet on their phones, right?

Hopefully, the hipness of my CSS-Gradients allow you to forgive me 😇