A Sticky Side-Menu Using jQuery

Mar 26, 2012 by Eugene Sklyar

“Sticky” navigation is the result of the ongoing improvement of web usability and conversion rates through rigorous testing and research by numerous specialists worldwide.

The fact that the user always has access to navigation on a very long, information-heavy page, not only attributes to a more pleasant usability experience, but also to higher conversion rates and more pages per view.

Some of you have been wondering how to make a “sticky” menu on a vertically scrolling website, so we’ve decided to write a short tutorial for you.

Enjoy!

Setup

First things first, this could have been done from scratch using JavaScript and/or jQuery but since there is such a nice plugin available, there was no need to spend extra time coding it from scratch.

The best plugin for this functionality that I found was jQuery Sticky by Anthony Garand. You should head over to the website and download the latest version of the plugin.

Install the plugin in your JavaScript directory and call it in inside of your HTML file like this (after calling jQuery):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Sticky Plugin</title>
    <script type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.sticky.js"></script>
  </head>
  <body>
    <!-- Menu Will Go Here -->
  </body>
</html>

The next step is to setup your menu structure so it responds to your activation of the plugin.

<body>
  <div id="movable-items">
    <ul>
      <li><a href="#">Menu Link #1</a></li>
      <li><a href="#">Menu Link #2</a></li>
  </div>
</body>

To tie everything together in the end, we need to write some custom JavaScript (the constructor) to activate and use the Sticky plugin (do this directly after calling the plugin).

<script>
  $(window).load(function(){
    $('#movable-items').sticky({ topSpacing: 50 });
  });
</script>

Tweaking

Some cool tweaks can be added into the functionality of this plugin. For example, if you have a design that should restrict the menu from moving too far down it can be adjusted through your constructor.

<script>
  $(window).load(function(){
    $('#movable-items').sticky({ topSpacing: 50, bottomSpacing: 385 });
  });
</script>

You can also add a wrapper container as well as a class that will display for all “stickied” elements in your document.

<script>
  $(window).load(function(){
    $('#movable-items').sticky({ topSpacing: 50, bottomSpacing: 385,
                                 className: 'sticky', wrapperClassName: 'my-wrapper' });
  });
</script>

Demo

Menu was developed for the below website (currently offline). Please see Canonbie's website for a working example.

Eugene Sklyar - Technology & Development

Eugene Sklyar is a strong advocate of open source content management systems. As our resident Drupal expert, he oversees all website development and leads our team on projects like iliketowastemytime.com. He also shows up to work early everyday.

Personal Blog

Comments

comments powered by Disqus