DesignWoop welcomes this guest post by Alexandre Smirnov a web designer and developer who lives and works in Cal­i­for­nia.

Today, I will be showing how to create a sticky sidebar jQuery script. Now, I’m sure many of you have a question: Why can’t I just use “position:fixed”?

Well, you can, but then the element with that style will stay where it is relative to the top of the viewport.

This means, if the element you are “fixing” in place is in the center of the page, it will stay in the center of the page as you scroll down. With this script, it will stay wherever you want it to be.

Check out the demo of the Sticky Sidebar jQuery

jQuery sticky sidebar script

You may also like:

Using jQuery To Create Smooth Page Scrolling

How To: Create a jQuery scrolling sidebar

Setting the HTML

Now, we’re going to start off with some simple HTML for the sticky sidebar. In this case, we’ll be “sticking” a div with an id of “sticky”.

<br />
&amp;lt;div id=&amp;quot;sticky&amp;quot;&amp;gt;</p>
<p>&amp;lt;/div&amp;gt;</p>
<p>&amp;lt;div id=&amp;quot;text&amp;quot;&amp;gt;</p>
<p>&amp;lt;/div&amp;gt;<br />

Setting the CSS

Now that we’ve got the foundation, we can apply some styles to it to make the page look nice.

<br />
body {<br />
    background: #fbfbfb;<br />
}</p>
<p>#container {<br />
    width: 744px;<br />
}</p>
<p>#text {<br />
    color: #333333;<br />
    margin-top: 100px;<br />
    width: 500px;<br />
    height: 10000px;<br />
    float: right;<br />
    font-size: 15px;<br />
    line-height: 23px;<br />
}<br />

Of course, we’re also going to need to style our sticky element.

<br />
#sticky {<br />
margin-top: 50px;<br />
margin-left: 50px;<br />
padding:5px;<br />
background: rgba(255,255,255,1);<br />
height: 120px;<br />
width: 305px;<br />
-webkit-border-radius: 7px;<br />
-moz-border-radius: 7px;<br />
border-radius: 7px;<br />
}<br />

Setting the jQuery

Great, now we can move on to the jQuery that will make this all work. Before we begin, let me clarify exactly how the logic behind this goes. We have a normal element, just sitting on the page. Then, when the page is scrolled enough that the element we’re sticking is touching the top of the viewport, we “stick” the element.

What that means? We set the element to be “position:fixed”, after which we give it margins that will place it into the same stop where it was before being fixed? Sound complicated? Don’t worry, the code is actually quite simple.

First, we declare some variables.

<br />
var obj = $('#sticky');<br />
var offset = obj.offset();<br />
var topOffset = offset.top;<br />
var leftOffset = offset.left;<br />
var marginTop = obj.css(&amp;quot;marginTop&amp;quot;);<br />
var marginLeft = obj.css(&amp;quot;marginLeft&amp;quot;);<br />

We need these values to be able to position the element correctly when it is “stuck”.

Next, we have to create a window scroll function. This function will execute every time the page is scrolled.

<br />
$(window).scroll(function() {<br />
	var scrollTop = $(window).scrollTop();<br />
});<br />

As you can see, the syntax is quite simple. Also, take a look at the “scrollTop” variable. This variable will be updated every time the page is scrolled. It holds the value of how far the user has scrolled. Specifically, how far away the top of the viewport is from the top of the actual page.

Now, we’re going to need two “if” statements. One of them will execute if the user has scrolled to the sticky element. Now, the next “if” statement may seem extra at first.

However, it is actually very important. An image that the user has scrolled down and the sticky element has been “stuck”. Then, imagine what would happen if the user were to scroll back up the page?

The element would stay “stuck”, instead of going back to its previous position. In order to fix it, we’re going to have a function that checks if the sticky element is higher than its original position. If it is, the function reapplies the original styles. That’s why we need so many variables at the top of the javascript.

These are the “if” statements:

<br />
	if (scrollTop &amp;gt;= topOffset){</p>
<p>		obj.css({<br />
			marginTop: 0,<br />
			marginLeft: leftOffset,<br />
			position: 'fixed',<br />
		});<br />
	}</p>
<p>	if (scrollTop &amp;lt; topOffset){ 		obj.css({ 			marginTop: marginTop, 			marginLeft: marginLeft, 			position: 'relative', 		}); 	} 

Those “if” statements are the meat of this code – they make everything work. Here’s the end result:

var obj = $('#sticky'); var offset = obj.offset(); var topOffset = offset.top; var leftOffset = offset.left; var marginTop = obj.css(&amp;quot;marginTop&amp;quot;); var marginLeft = obj.css(&amp;quot;marginLeft&amp;quot;); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); 	if (scrollTop &amp;gt;= topOffset){</p>
<p>		obj.css({<br />
			marginTop: 0,<br />
			marginLeft: leftOffset,<br />
			position: 'fixed',<br />
		});<br />
	}</p>
<p>	if (scrollTop &amp;lt; topOffset){</p>
<p>		obj.css({<br />
			marginTop: marginTop,<br />
			marginLeft: marginLeft,<br />
			position: 'relative',<br />
		});<br />
	}<br />
});<br />

Well, that’s the end of this tutorial. I hope you enjoyed it! Also, don’t forget to actually include the jQuery library, and don’t forget to wrap everything in a $(document).ready(function(){} as well.

Check out the demo

jQuery sticky sidebar script