How to create a sticky sidebar

A look we’ve seen utilized on a lot of sites recently is the sticky sidebar. That’s a sidebar that scrolls normally until it reaches the top of the screen, at which point it attaches itself to top of the viewport until you scroll back up the page.

It’s an interesting piece of usability because it keeps the user in contact with a particular piece of navigation (often social media buttons).

So today, we’re going to have a look at building a sticky sidebar using some simple jQuery and CSS.

The HTML

The first thing to do is, as usual, to construct our HTML. We’re going to use an aside, a container div and a section to create a simple two-column website where the sidebar stays on the left:

<div class=“container">
  <aside class="sticky">
    <ul>
      <li>Home Page</li>
      <li>Sub Page</li>
      <li>About US</li>
      <li>Buy App</li>
      <li>Contact</li>
    </ul>
  </aside>
  <section>
    Your text in here
  </section>
</div>

As you can see, it’s a simple setup designed to minimize the amount of CSS positioning required.

The jQuery

If we think about this in a strategic manner, we can see that we want our sidebar to become fixed when it reaches the top of the viewport, so for that we need to compare how far it is from the top of the viewport and increase that amount when the user scrolls more than that:

var offset = $('.sticky').offset();
$(window).scroll(function(e) {
  if(window.scrollY >= offset.top) { 

  } 
});

This code is simple, we first checked the offset of our aside, and added a function that runs every time the user scrolls. Inside the function there’s an if statement that checks if the scroll is greater than the offset of the aside. If the if is true then we need to add the class fixed to the aside:

  if(window.scrollY >= offset.top) { 
      $('.sticky').addClass('fixed');
  }

The CSS for this class is very simple:

.fixed {
  position: fixed;
  margin-top: 0px;
}

If you try out your page now, you’ll see that when you scroll beyond the offset the sidebar sticks to the top of the viewport, but scrolling back doesn’t release it. That’s because we’ve not removed the fixed class, which we can do with an else:

  if(window.scrollY >= offset.top) { 
      $('.sticky').addClass('fixed');
  }  else {
      $('.sticky').removeClass('fixed');
  }
});

If you reload your page now, and scroll up and down you’ll see it works perfectly.

Final touches

A nice final touch, is to add a ‘back to the top’ button, so that the user can jump back to the top of the page, taking the sticky sidebar with her.

To do this, we first need to add a list item to our ul:

<li class="hide top"><a href="#">Back To Top</a></li>

I’ve added the class hide to the link, so that we can hide the link if the user is already at the top of the page. We do that by modifying our if…else statement a little more:

  if(window.scrollY >= offset.top) { 
      $('.sticky').addClass('fixed');
      $('.top').removeClass('hide');
  }  else {
      $('.sticky').removeClass('fixed');
      $('.top').addClass('hide');
  }

Then we need to add a little more code to handle the function of the link:

$('.top a').click(function(){
  $(document.body).animate({scrollTop : 0},800);
  return false;
});

If you click the link it scrolls you the top then disappears.

With that done we have created our sticky sidebar and also added the little touch of a ‘back to top’ button that can come very in handy.

As always, you can see a demo of this in the pen I’ve created.

Have you used a sticky sidebar in a project? Do you have a better technique? Let us know in the comments.