Digital Visions Queenstown

Sliding sidebars that follow the user up and down the page are great for viewing what’s in your shopping cart on e-commerce sites or for site navigation.

This tutorial is based on the menu over at www.kingtray.com.

View Final Demo.

Getting Started

First of all create a new html document and paste in the following. Make sure you link to a copy of jQuery and create a blank JavaScript file called sidebar-slider.js.

<div id="container">
<div id="content">Main Content</div>
<div id="sidebar-container">
<div id="sidebar"></div>
</div>
</div>

On a real site you would obviously have things like a header and footer, but for this tutorial they aren’t needed.

Next we need some basic styling.

#container { left: -92px; margin: 0 auto; position: relative; width: 600px; }
#content { width: 560px; background: #ececec; padding: 20px; }
#sidebar-container { position: absolute; right: -184px; top: 0; width: 171px }
#sidebar { width: 171px; height: 195px; background: #333; top: 100px; position: absolute; }

For this effect to work correctly the sidebar will be absolutely positioned and have negative space on the right and we will need to relatively position the container and add some negative space on the left, to ensure the design is centered

Now we will place the following javascript code in the sidebar-slider.js file that we created earlier.

First of all we declare a couple of variables:

var name = "#sidebar";
var sidebar_top_limit = 100;
var sidebar_top_margin = 20;
var sidebar_slide_duration = 500;

• “name” will be used to select which element will slide up and down the page.
• “sidebar_top_limit” sets how close to the top of the page the sidebar is allowed.
• “sidebar_top_margin” sets the distance from the top of the browser window the sidebar is allowed, while scrolling.
• “sidebar_slide_duration” defines the speed at which the sidebar should slide.

Now we need to add a window scroll function:

$(window).scroll(function() {
});

Inside of this we add:

offset = $(document).scrollTop() + sidebar_top_margin;
if(offset < sidebar_top_limit)
offset = sidebar_top_limit;
$(name).animate({top:offset},{duration:sidebar_slide_duration,queue:false});

The first part applies the top margin for when you are scrolling.

The next part applies the limit of how close to the top of the page the sidebar can go.

The last piece of code sets up the animation, using variables we set up earlier.

View Final Demo.

And there we have it a sliding sidebar that is quick to build and easy to customize.