posted by Matt Ward on Nov 15, 2010.
Freebie: I’m releasing my first ever jQuery plugin, which I am calling Contained Sticky Scroll. It basically allows you to create an element that will “stick” to the top of the window as the user scrolls, but which will not move outside of its parent element.
If you’ve been here before, you may have noticed something a wee bit different in terms of how the advertising is working here. After talking to the guys at AdPacks.com, who take care of all my advertising sales, I elected to try to improve advertising performance a bit by having the ad box “stick” to the top of the screen as you scroll down. It helps keep the ad in the window and increase overall visibility.
Now I know that not everyone will be a fan of that kind of thing, so I’ve tried to strike a bit of a compromise. You may also notice a simple circumflex (^) to the right of the ad space. If, at any time, you want to un-stick the ad box, just click that and the whole thing will go floating back up to its default position.
I like this solution because it helps me bring greater benefit to the awesome advertisers who help support this site, but also offers choice to the user.
So what does all this have to do with a freebie? Well, after searching the web for a while, I couldn’t really find a jQuery plugin that would really do what I wanted. You see, I wanted to make the ad box sticky, but I also only wanted it to scroll within the limits of its parent element. The sidebar is specifically designed to exist in the main content area, and I certainly didn’t want it floating down over the comment and footer sections. I’ve seen this done before, so I’m sure there’s something out there, but I couldn’t find it.
So I wrote my own, which is now finished and working (or should be working). I’ve decided to release it as a freebie here too.
The download package contains both full and minified versions of the .js file, along with a demo page which explains the various options that can be used to configure each initialization of the plugin’s functionality. If you want to check out the demo page without actually downloading the entire package, I’ve also uploaded it here.
So far, I’ve tested the plugin in recent versions of Firefox, Chrome, Safari and even Internet Explorer 8. It uses basic jQuery methods, so any browser that supports jQuery should be able to handle this one.
This is my first jQuery plugin, and I’m not really sure what to expect in terms of reception. For now, if you have any questions or issues with the plugin, feel free to leave a comment. That being said, if the plugin becomes successful in the future, I may carve open a separate forum or something to deal with support requests.
Anyhow, go ahead and download the plugin. Have fun with it. If you do end up using it, I’d love to see it in action or hear your thoughts on it.Post A Comment
Also from Echo Enduring Media: