Unveiled-Sticky-Navigation
UI Pattern
Ever since I discovered medium.com the first time, I’m fascinated by the way how they deal with the main navigation while scrolling. I don’t know, if they were the first ones who used this kind of UI pattern, but they were the first ones that brought my attention to this.
This is how it basically works. Scrolling down will move the navigation out of the viewport quite naturally. But here’s the thing: Once you scroll up a little bit, the navigation will be unveiled right ahead without the need to scroll to the very top of the page where you left it before.
I did some research lately, but I couldn’t find any term that is in use for that kind of UI pattern. Since it feels like unveiling a sticky navigation, I just call it Unveil Navigation Pattern for now, but please feel free to educate me.
The big advantage of handling things this way is that you can focus on what’s important while scrolling down, but bring back in what the user is probably looking for when scrolling up. Furthermore on mobile devices this technique will leave space that’ll be available for the content.
I got some time to tinker a little bit and create a jQuery plugin to make this UI pattern available for others. I’ve also found some useful features that’ll enhance this pattern:
- Scrolling up to the very top, the navigation can be transformed to a special state (like an extended version)
- Once scrolled to the very bottom, the navigation will be automatically unveiled, which gives users new opportunities on where to go next when finished reading the content.
- An offset will define how much pixels a user needs to scroll up until the navigation becomes unveiled. This will prevent distraction from reading the content when users scroll up just a bit.
- Even if hiding and unveiling the navigation naturally with the speed you are scrolling, an acceleration property will help you to get some kind of lazy navigation unveiling/hiding.
The plugin on GitHub
https://github.com/weaintplastic/jquery-unveiled-navigation
