Jake Rocheleau
writes on February 15, 2013
There have been countless efforts in creating a dynamic set of codes for sticky sidebars. Most commonly this effect is used on blogs or magazines with fixed social media sharing badges. You may notice the effect here on Treehouse Blog, and also plenty of other big-name websites.
But consider how this may be used in a wide variety of circumstances. Even setup on basic portfolios or informational websites. I want to demonstrate how to create a very simple layout and get the fixed sticky sidebar effect using a jQuery plugin. This example requires the stickyMojo plugin developed by the people over at MojoTech. You can get a quick glimpse at this style from my live project demo example at the bottom of the article.
Getting Started
The first step is to download a copy of the stickyMojo plugin source code. The zip archive is very small and the only file we need is named stickyMojo.js. Copy this into a new project directory and setup another file named index.html for our homepage. I’ll be using a basic HTML5 layout holding a content div floated next to the sidebar.
<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Sticky Sidebar Navigation Menu Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://teamtreehouse.com/assets/favicon.ico"> <link rel="icon" href="http://teamtreehouse.com/assets/favicon.ico"> <link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,700"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/stickyMojo.js"></script> </head>
To improve readability I’ll be using the Open Sans webfont by Google. Also we need to create the external styles.css stylesheet which houses all the page formatting. Now inside the body element I have a wrapper container with the ID #w. This centers everything on the page limited to 800px wide. Let’s take a peek at the HTML layout with most of the Ipsum content removed:
<div id="w">
<header id="heading"><h1>Sticky Sidebar Menu*</h1></header>
<div id="content">
<!-- main page content here -->
<div id="articlefoot">
<hr>
<!-- article footer -->
</div>
</div>
<div id="sidebar">
<!-- sticky sidebar -->
</div>
<footer id="foot"> <!-- no content --> </footer>
</div>
As you can tell the wrapper contains all of our divs together. The header displays 100% width to knock down the content area underneath. Then the 2 floated divs will be side-by-side and the internal content actually has a small footer area beneath the text. We can use this to demonstrate how the sidebar will use stopping points to determine how long it should scroll.
CSS Resets
The HTML code is fairly simple to understand so we can move onto the stylesheet document. The easiest way to remove extraneous bugs is to include CSS code resets. I will be using my own custom snippet based off Eric Meyer’s CSS resets.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body { font-family: 'Open Sans', Tahoma, Arial, sans-serif; font-size: 62.5%; line-height: 1; background: #33363b; }
::selection { background: #adf0bd; }
::-moz-selection { background: #adf0bd; }
::-webkit-selection { background: #adf0bd; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
The first property selector contains a litany of elements which covers the majority of default items on the page. You should notice a few selectors which are rarely seen in other documents. For example -webkit-font-smoothing is only displayed on Mac OSX and iOS devices for rendering cleaner texts with anti-aliasing effects.
Also the ::selection and alternate vendor prefixes allow us to customize the background color when users highlight some text on the page. I’ve chosen a shade of light green but you could change this to anything relatable to your own theme. Aside from these common resets I have also fixed up typography for the h1-h3 elements and paragraphs in the page.
Layout Structure
The last major part of CSS requires us to style the left and right columns. This is a lot less work than it sounds and many of the techniques have been covered in previous articles. This final code segment can be found at the bottom of my stylesheet document.
#content {
width: 650px;
float: left;
padding: 15px 20px;
background: #efefef;
border-right: 7px solid #639846;
box-shadow: 4px 5px 10px rgba(30, 30, 30, 0.35);
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
}
#sidebar {
width: 150px;
background-color: #efefef;
margin: 45px 0 30px 0;
padding: 5px 10px;
float: right;
border-bottom: 3px solid #7fc558;
opacity: 0.75;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
#sidebar:hover {
opacity: 1.0;
}
The content and sidebar areas should be equal to the exact width of the container. This is why I am using border-box as the box sizing property so that padding and margins don’t tack on additional width. Also I have included a small border on the content div so we can tell where the sidebar is connecting.
You will also notice the sidebar div is using a dimmed opacity around 75%. This animates to 100% when you hover the menu. It is a nice effect if you want the sidebar to appear secondary to your content. And it may include meta information such as author profiles, publish dates, and of course social media sharing buttons.
Adding the jQuery Code
The last and final step to get our whole layout working properly is to define the stickyMojo function code. Following instructions per the documentation page we are passing in 2 unique parameters.
$(document).ready(function(){
$('#sidebar').stickyMojo({footerID: '#articlefoot', contentID: '#content'});
});
First we need to tell the plugin where it should stop scrolling and stay fixed on the page until the user returns. Then secondly we need to define which div it should be attached onto while scrolling. Typically if you leave space between the content and sidebar it will snap over to fill the gap once you begin scrolling down. But I recommend testing out some different values to see how you can get this plugin to work perfectly in your own layout.
Live Demo – Download Source Code
Final Thoughts
Hopefully this tutorial can express a very simplistic method of attaining the sticky sidebar dynamic interface. JavaScript provides the most supported frontend language for setting fixed elements along with page scrolling. And the stickyMojo plugin is also on Github with support questions and further documentation.
After checking my live demo you should also download a copy of the project source code. This is released with no license under public domain, so feel free to edit and copy as you wish!
Great article! Thank you for your work, it’s very helpful.
Nice article, thanks. Really helpful. i have a similiar case to build a sticky menu like this. Thanks
this was so helpful! Saved me a ton of last minute banging my head against a wall.
Great article Jake!