Recently I just came across an awesome plugin that floats a sidebar or any element along as the page scrolls without overlapping any parent elements. So today I figured I would write a tutorial on how to take advantage of this plugin and use it in one of your WordPress themes.

DEMO

NOTE: I used WPCandy’s sample posts and data to extend the page and show off the plugin

The first step to getting this working is to add the jQuery library onto your theme the easiest way of doing this is to go inside of your header.php file inside wp-content and add this right above wp_head();

After adding that code I usually use Firebug to check the head tag and make sure jQuery is loaded properly. Now we load the stickyFloat plugin into the header.php file right under wp_head(); but outside of the php tags.

Right under that we want to initiate the plugin and choose what element we want to allow to scroll

NOTE: Duration is the delay it takes for the element to scroll to where you are on the y-axis of the document

After that’s all done now we need to edit the CSS to get it fully functional. The way the plugin works the element needs to have absolute positioning to work because as the page scrolls the plugin is increasing or decreasing the element’s top position value to move where we are on the y-axis of the document. The element also needs a relative positioned parent to know how far down or up it can scroll without overlapping or going under the footer or header.

So to get started lets open the style.css file (I’m using the Twenty Ten theme that comes with WordPress so it may be a little different for you if your using a different theme). Next we find the element we are scrolling in my case it’s the #primary div. Here is what i added.

I also had to add position:relative; to the #main div which is the parent element of all the content in the middle of the page and the sidebar. Now onto the last part open your stickyfloat javascript file and find and replace “$” with “jQuery” this will get it to work with WordPress this is a very dirty and quick way of doing it and you can manually do it if you know what your doing and want to. This is needed because WordPress already has scripting libraries that use “$” and fails to call jQuery commands so using jQuery is an alternative way for getting it to work for another way check out my previous post on it here.