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 😇