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
  • Panos

    Hi,

    I added your pieces of code to my theme files as you suggested me to but it seems that I did something wrong because i cannot achieve the sticky effect as in your demo site.

    Could you please be kind enough and take a look at my site and tell me what I did wrong?

    if you display my source code of my site and search for the keyword sticky you will find all the occurences of the code.

    The class .navbar-wrapper does not get the class .navfixed when you scroll up.

    My site is still under construction but you can see it if you visit the address :

    www dot redheadillusion dot com / redhead

    Thank you very much.

  • Panos

    Hi,

    My navigation bar was far away from the top. When I moved it to the top the sticky effect started to be displayed.

    But the problem now is that my responsive navigation menu is not being displayed when the screen becomes mobile size.

    I sent you a regular mail message with attached images.

    Could you please tell me if I had to alter something in the code so as to have both sticky effect and the responsive navigation menu of mine?

    Thank you very much.

    • This is because you have given display:none in foundation.css on mobile device.

    • Panos

      Hi,

      Thank you very much. With your suggestion I managed to display the menu not as dropdown as in the images that I sent you but as a regular line menu.

      Unfortunately the jquery was messing with other pieces of code of my theme – I was losing the cookie info bar down in the screen – so I decided to “forget” your very beautiful Sensitive Sticky Navigation Menu with Jquery.

      I hope that someone else with a different template than mine will be more lucky than me.

      Thank you very much for your support.

      • Its sad to hear from you. And one thing more, Only One Jquery is needed per one Page. No need of Two Jquery. You can try with using any of the one only.

  • draco

    Hi @Web3Canvas, Nice demo. Is it possible to use your plugin for a wordpress custom menubar? Can it be used without the sensitive component?
    thnx

    • What do you mean by without sensitive.. ?

  • Love the idea and have been testing similar things myself. One thing: it would make the experience even better, if you could add a simple fadein transition once the user starts scrolling? Where would you put that – in the bootstrap-collapse.js

  • Andy

    Saw this in many websites – over 2 years… nice one.

    The ones I can see all come with transition effects rather than pop the sticky menu up in no time. I am wondering how could this be implemented?