This WordPress Sidebar Plugin Stickies Your Sidebar When Scrolling

This WordPress Sidebar Plugin Stickies Your Sidebar When Scrolling

WordPress Sidebar Plugin -  Keep your sidebar on screen even when scrolling to the bottom of a page

If you’ve ever visited the forums at WPMUdev.org, you’ve likely noticed a really cool effect added in the 2012 site redesign: the sidebar that floats on your screen as you scroll through the page.

Just seeing that coolness got me bit excited the first time I saw it… little things like that can get my synapses firing in all directions!

Recently, I wondered how I could achieve a similar effect on a site I’m building. Well, guess what? I found a WordPress sidebar plugin that does exactly that!

The Strx Magic Floating Sidebar Maker

Download | More Info | Video Demo

This plugin is marvelously simple to install and set up. It took me exactly 5 minutes from download to big happy grin. The plugin settings page is simplicity itself. Enter the IDs of your main content and sidebar divs, adjust the animation and offsets and, that’s it!

WordPress Sidebar Plugin - Screenshot of Floating Sidebar Plugin Settings-1
Strx Magic Floating Sidebar Maker Settings

There are also a couple of useful utilities to help you set things up:

  • Debug: prints all your settings in your browser’s “Tools” console.
  • Findids: prints a list of ids on your blog footer to help you identify your content and sidebar sections.
  • Outline: outlines with a dotted red line the sections you have identified as content and sidebar, so you can be sure you got it right!
WordPress Sidebar Plugin - Screenshot of Floating Sidebar Plugin Settings-2
Strx Magic Floating Sidebar Maker Settings

I tested this WordPress sidebar plugin on a site running WordPress 3.3.2 with BuddyPress and a child-theme of SimpleMarket from WPMUdev. It worked flawlessly right from the get-go. Here are a couple of screenshots from that installation.

WordPress Sidebar Plugin - Screenshot of Floating Sidebar Plugin in Action-1
Sidebar at top when at the top of the page.

 

WordPress Sidebar Plugin - Screenshot of Floating Sidebar Plugin in Action-2
Scroll up or down the page, and the sidebar content remains visible at all times.

You probably just noticed that a similar effect can be seen on this very page: the WPMUdev ad in the sidebar to your right stays put when you get to it. Guess what? You can achieve that effect too with this plugin! Instead of entering the ID for your sidebar, enter the ID of the lowermost widget in your sidebar. (You’d likely need to adjust the width of that widget in your style.css though, ‘cuz the plugin had a tendency to resize single widgets in my tests.)

I discovered only one (major?) drawback with this WordPress sidebar plugin…

It doesn’t appear to play nice with smaller, portable devices. Once the sidebar gets bumped to below the main content area on those devices, it gets cut off. Note that I drew this conclusion when viewing simulations at http://responsinator.com (I would have tested on real devices if I owned any, but I’m a neanderthal). For example, here’s the simulated display from a Kindle in portrait view:

WordPress Sidebar Plugin - Screenshot of Floating Sidebar Kindle Simulation from Responsinator.com
Screenshot of Floating Sidebar Kindle Simulation from Responsinator.com

You can see from the above screenshot that everything below “Welcome admin” disappears. Of course, a css ninja could probably tweak the plugin’s stylesheet with some media query magic, but I’m nowhere near ninja. If anyone would like to tackle this as a personal project, please, jump right in. Let us know how you get on in the comments below too!

Here are those links again for this cool WordPress sidebar plugin:

The Strx Magic Floating Sidebar Maker

Download | More Info | Video Demo

Photo credit: Flickr.com