(Smart) Sticky Navigation Menus
A current web design trend is the use of Sticky Navigation headers which allows the navigation of a website to remain visible and ‘stuck’ as the user scrolls down the screen.
Sticky Navigation is generally useful, though sometimes not so.
And sometimes it can be downright annoying.
Going one step further is the Sticky Header, where all but the navigation remains as the user scrolls down the page.
Here are some examples…
BEFORE:
As the user scrolls, the logo minimises into the left of the navigation and all but the navigation-element of the header is retained.
AFTER:
A nice addition… when you hit the bottom of the screen, the Zendesk Buddha pops up… a nice visual touch and one that tells the user they have reached the end of the page:
BEFORE:
Another great example… the navigation neatly collapses including the consolidation of the logo… allowing more product content to be displayed for the user. Nice.
AFTER:
BEFORE:
Another simple example… navigation collapses… the logo however is lost.
AFTER:
How do you do it?
There are plenty of web design examples and tutorials online about how to implement a sticky header and sticky navigation.
A few lines of JQuery essentially… and you’re off. Add the JavaScript to detect the scrolled height in order to trigger the JQuery.
In turn, the JQuery will change the CSS on your menu wrapper… the CSS doing whatever you tell it to do. Make sure sticky headers and sticky navigation actually adds value to your users… though if it does, get in there!
