Sensitive Sticky Navigation with JQuery

A Full time Sticky Navigation is annoying. It reduces the Readable area too. So we created Sensitive Sticky Navigation. This simple jQuery script will read your visitors mind magically and turn your navigation in to sticky. When they really want to navigate. Sounds cool right ?
If you are looking for Sticky Sidebar, you can download it from here.

The Past

When users are reading a lengthy page like blogs or articles, when user wants to navigate to another page, they might have to scroll until the page reach top.

The Present

To solve the above issue, Sticky Navigation is born where the navigation will always show on top, so no need to scroll until top.

Current issue

When showing navigation menu always at the top of the page, I found that it would affect reading and take some space in the viewport.  Especially if using same method in Mobile devices.

My Solution

So, I found a magical (dramatically) solution for the current issue. This simple jQuery script will read your visitors mind magically and turn your navigation in to sticky. That means consider old style website I mentioned in ‘The past’ section, When visitor wants to navigate, they will scroll up. In my solution, The script will show the navigation when the user starts scrolling up. (when they want navigation). Navigation will hide when user starts scrolling down.

The Result

Sensitive Sticky Navigation. (sorry if the name is not suitable for this script)

Inspiration

I found that Facebook is using the same method in their mobile app for the “Status update bar”

Wrapping Up

So I feel this simple script will give a fabulous user experience. You can see live demo or download the source code free (on the left side). Just scroll down and Scroll up to test.

Please let me know if you have any suggestions or opinions in comments. Also please do not forget to share if you like this.

Web3Canvas provides Freebies & Resources for Designers.

TwitterFacebook