You’ll notice as you read the rest of this post that the sidebar follows you as you scroll down the page. I first spotted that effect being used in the Sharebar widget (also seen here), and was surprised to discover how easy it is to do.
It took a bit of research, but I found the necessary code here. However, the example on that forum was for a shopping cart and, for non-technical WordPress users jQuery can be confusing, so I thought I’d give you my Nerd-to-English translation and explain how to easily make your WordPress sidebar stay visible when you scroll…
Getting Started
To keep things simple, I’m going to start with some Basic Instructions that should work for most WordPress themes. Then I’ll touch on Troubleshooting for themes that don’t cooperate right away, and finally I’ll open up the Comments section to your questions.
Basic Instructions
First, go to your wp-admin page and navigate to Appearance > Editor. Along the right side of the screen you’ll see a list of theme files. The file Stylesheet (style.css) should be highlighted; if not, click it.
Scroll all the way to the end of your style.css and add this code:
.fixed { position: fixed; top: 20px; }
Click Update File to save your changes, then click Header (header.php) in your list of theme files.
In header.php, search for this line of code:
<php wp_head(); ?>
If it’s not there, find this instead:
Right above it, insert the following code:
jQuery(document).ready(function($) {
$(function() {
if( !(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') ) { // check where the sidebar div is
var offset = $('#sidebar').offset();
$(window).scroll(function () {
var scrollTop = $(window).scrollTop(); // check the visible top of the browser
if (offset.top < scrollTop) $('#sidebar').addClass('fixed'); else $('#sidebar').removeClass('fixed');
});
});
});
});
Click Update File to save your changes, and you should be done! Check out your website and see if it worked. If not, continue reading…
Troubleshooting
Didn’t work, eh? Not a problem. There are a couple of obvious reasons this won’t work with some themes…
- Your sidebar is not identified by the ID #sidebar. This can be solved by editing the jQuery code above and replacing #sidebar with your theme’s sidebar ID (e.g. #widget-container). Note that you need to change it in three places within the jQuery code.
- Your theme has jQuery disabled for some reason. Edit your function.php and header.php and search for this: wp_deregister_script(‘jquery’);. If you find it in either place, kill it.
- Your sidebar is on the left and your page content is not styled to float right, causing an overlap. Try adding #content { float: right; } to the end of your style.css.
If you still can’t get it working, leave a comment with a link to your site and I’ll try to point you in the right direction.
Questions?
Post them here as comments, along with a link to your site.
Shaun Scovil