Simple and Short jQuery fixed floating scrollbar technique

There are unlimited number of ways to create fixed floating sidebars and I am going to propose yet another way. It is short, sweet and elegant. Of course, it is cross browser. Actually, I was trying to create one for a site. I have a thing against “if” conditions and so wanted to get rid of them.

In the process, I came up with a with a very short code, to give a smooth floating effect. So lets go through the steps one by one.

Let’s create all the HTML first like below:

<div class="header">This is the big boy header</div>
<div class="content">This is the content</div>
<div class="sidebar">This is the sidebar</div>
<div class="footer">The poor footer lies here</div>

Nothing to explain here. A normal header, content, sidebar and a footer.

Now, let’s do the css bit here

.header { width:100%; background:red; height:80px }
.content { width:80%; background:blue; height:800px; float:left }
.sidebar{ width:20%; background:yellow; height:390px; float:right }
.sidebar.fixed { position:fixed; right:50%; margin-right:-50% }
.footer { width:100%; background:gray; height:50px; clear:both }

Now you could make this as long as you want (or shorter) depending on your need. However, the important thing to note is the .sidebar.fixed portion with position:fixed.

Finally, the Javascript. I have used jQuery here. Let’s have a look at it:

$(document).load(function() {

   /** The code starts here **/
   $window = $(window),
   $sidebar = $(".sidebar"),
   sidebarTop = $sidebar.position().top,
   $sidebar.addClass('fixed');

   $window.scroll(function(event) {
      scrollTop = $window.scrollTop(),
      topPosition = Math.max(0, sidebarTop - scrollTop),
      $sidebar.css('top', topPosition);
   });
   /** The code ends here **/

});

The first two lines are just for performance. Storing the references of the window and sidebar in variables as they would be referenced in the scroll event. We also save the top position of the sidebar, before making the position fixed through adding the class.

We record the current window.scrollTop() position, and Math.max is really to get rid off the if statement. This makes it look very elegant. Also, you could replace the 0 with an offset value, if you want any margin at the top of the sidebar. The value is used to set the top position of the sidebar.

And that’s it. You are done. You can try it out for yourself here on JSFiddle

Bonus Technique

Now, what if you want the sidebar to float only within a range. Say in the above example, we want the sidebar to float as we scroll, but not beyond the footer. (Never overlap the footer).

In our above steps, change the css of the footer (increase height) like below and see what happens:

.footer { width:100%; background:gray; height:100px; clear:both }

As you scroll down to the bottom, the sidebar overlaps with the footer. We can avoid this by the below code:

$(document).load(function() {

   /** The code starts here **/
   $window = $(window),
   $sidebar = $(".sidebar"),
   sidebarTop = $sidebar.position().top,
   sidebarHeight = $sidebar.height(),
   $footer = $(".footer"),
   footerTop = $footer.position().top,
   $sidebar.addClass('fixed');

   $window.scroll(function(event) {
      scrollTop = $window.scrollTop(),
      topPosition = Math.max(0, sidebarTop - scrollTop),
      topPosition = Math.min(topPosition, (footerTop - scrollTop) - sidebarHeight);
      $sidebar.css('top', topPosition);
   });
   /** The code ends here **/

});

The scrollbar will now scroll only within the range. Try the demo.

You can provide your feedback and improvement suggestions in the comments.

Related posts:

1. HTML5 Audio explained in 4 simple steps