Smooth floating sidebar
This morning I added a floating sidebar to the theme for my blog. I added the Infinite Scroll plugin so I thought it'd be nice for the sidebar to follow as you scroll through the posts.
I initially implemented code from a Design Woop article, but wasn't overly happy with the bouncy effect that is achieved by that method (using the jQuery animate() function), so I made a few changes.
Here's what I've come up with. It's tailored to my blog's theme rather than implemented as a jQuery function, but if you know your way around the framework it's easy enough to replace what I have with what you'd need.
Rather than animate the sidebar so it moves up and down according to its relative position, the function checks to see whether the user's about to scroll down, then sets the position of the sidebar to "fixed", and absolutely positions the sidebar according to an earlier calculated offset. That way, you get a completely smooth movement.
I also calculated the height of the WordPress top bar for logged-in users (me). The only side-effect here is that there's a slight jump because my maths brain can't figure out how to calculate things properly. But if you're not logged in, it's totally smooth.
There is however one problem. Unlike the Design Woop method, mine breaks when you use the browser's zoom functionality and then scroll. But if I'm honest, I can live with that.
I haven't tested this in IE, but I'd imagine it would be fine in 9, possibly 8.
There are doubtless much better implementations to use as a baseline, but this is good enough for me. If you've implemented it - or have your own implementation - do shout; I'd love to see yours in action.
