I am available for freelance work - HIRE ME

Freebie: Contained Sticky Scroll jQuery Plugin

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.

Freebie: Contained Sticky Scroll jQuery Plugin (Downloaded 19098 times)

Freebie: Contained Sticky Scroll jQuery Plugin (Downloaded 19098 times)

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.

View the demo

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:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Nov 15, 2010

Robert says:

Very nice plugin. I will use it for sure.

Nov 16, 2010

WilleNewMedia says:

That’s a great one, Matt.
Thanks a lot, very helpful plugin, gonna be using it when time comes!

Nov 16, 2010

Ignatius Mario says:

Thank dude, this what i looking for lately, :)

Nov 16, 2010

Keri says:

Thanks for sharing!

Nov 16, 2010

Chris McClean says:

That’s a brilliant twist on an age-old design concept. Nice job! :]

Nov 16, 2010

shoogle designs says:

Well done Matt.

I had seen similar approaches with stickyfloat plugin and its subsequent usage in a specific constrained area… but this is way more advanced.

Thumbs up for the WordPress friendliness of the tool, too often ignored, and the clever unstick functionality.

Nice one as ever…

Nov 17, 2010

Simon says:

Very nice and fresh freebie

Nov 17, 2010

dan says:

yeah fresh and tight

Nov 18, 2010

nestdev says:

very nice,, submit this post : nestdev.com thanks :)

Nov 18, 2010

rose says:

nice,, i like it

Nov 20, 2010

Maxlabs says:

Love this. Thanks!

Nov 20, 2010

Gustavo says:

this great plugin! how can I use it (software) ?

Nov 20, 2010

Dom says:

Great Stuff! Thank you

Nov 24, 2010

chris says:

do you add this plug in as usual or is there a twist. I can’t seem to install it correctly. using wp 3.01

Nov 24, 2010

Matt Ward says:

What seems to be the problem? It’s a pretty standard usage.

Nov 25, 2010

Anton Andreasson says:

I did something similar, based on your and another plugin, that lets me have a (non-animating) element “stuck” in its parent element.

However, since I ran in to some performance issues (and I see you have about the same kind of code I originally have) you could solve this yourself too, just by storing the options.oSelector differently.

Try $getObject = $(options.oSelector) and use the former variable later on, instead of continually fetch a new object every time you scroll.

Keep up the good work!

cheers,

Nov 30, 2010

Saddam Azad says:

You know Matt, I was reinventing the wheel just now … and then I stumbled on your site ..

Thanks for the “Oh shit” moment.

I’ll be using your plugin now .. because spending another 2 hours on my plugin seems pointless.

Cheers mate, good work. -_-

Dec 6, 2010

Radu says:

Am I going to have to be the one to say it? Ok, here it goes: why isn’t position: fixed good enough? Does the slight scroll justify the added weight of a plugin? The “go back to top circumflex” feature can be easily done with a CSS change in position.
I’m not trying to be an ass, just genuinely trying to understand why this plugin is better than a pure CSS solution.
That being said, congratulations on your first jQuery plugin!

Dec 6, 2010

Matt Ward says:

I’d thought of using the fixed position, but the behavior in an of itself isn’t exactly what I want, at least as far as I can tell. If I fix the element, it’s going to stay in place right? That’s not exactly what I want though. First, I want the sidebar to stick to the top of the page. Unless I have it start at the top of the page though, it will just stay in its default position on the screen. Second, I don’t want it scrolling outside of the main content area and I don’t think it’s currently possible to do this with pure CSS.

Of course, I could be totally mistaken. So if someone knows a better way of doing this feel free to tell me and I’ll give it a shot.

Thanks for the input, Radu. Always appreciated!

Dec 7, 2010

@weallneedheroes says:

Personal i don’t see a use for this in any of the day to day projects we do. I do like the idea behind it but i have tried to get things like this into projects in the past & they never get through. Personally i don’t like the fact it goes out of sight when you scroll & then animates back in (but I’m sure this is something that can be tweaked?)

On the other hand Radus also has a point about using css “fixed” to achieve a similar effect although I’m not sure if you can have it stop within its container without using some kind of jQuery.

But all this said not everyone will always agree, some will use this & some wont but nice job for your first post well done :)

Dec 25, 2010

Pablo Díaz says:

Nice! I will use soon!

Dec 28, 2010

Andrew says:

Awesome plugin. I can think of a handful of places where this will become useful.

Thanks

Dec 28, 2010

Zach Leatherman says:

Hey Matt,
Remy Sharp did a screencast and demo on this same concept awhile back.

I think his lack of animation (using native position: fixed) is probably less distracting.

Check it out:
http://jqueryfordesigners.com/fixed-floating-elements/

He doesn’t have his packaged up as a plugin, so your implementation is definitely great. Maybe you can spruce it up a bit with native CSS position: fixed?

Jan 3, 2011

Em Dash says:

Nice, thank you for sharing this, I’m currently using it for a project.

I have noticed the script doesn’t work at all once you set the unstick variable to “false”.

Jan 17, 2011

Joseph McCullough says:

Hey, nice plugin! I have a similar plugin that allows for callbacks at certain scrolling intervals:
http://www.vertstudios.com/blog/jquery-sticky-scroller-position-fixed-plugin/

Question: Is the comment box first due to Chris Coyiers “Do the hard part first” post?

Jan 18, 2011

David says:

Very nice Matt – well done.

Jan 18, 2011

James W says:

Great plugin, I’m trying it out on a few projects. I think the easing makes people notice the sidebar more.

Jan 26, 2011

Joshua Kelly says:

Thanks a ton for this Matt! Love to see fellow Ontarian devs doing great work.

Feb 1, 2011

Nicholas Boll says:

I noticed some strange action when scrolling in containers (parents) that were not close to the top. It basically stops moving too soon.

It turns out the first test looks for the parent().position().top instead of parent().offset().top, which is causing the parent’s top to be too low. Updating this now makes sure the sticky stays within the bounds of the container without stopping prematurely.

I also ended up rewriting it for performance, ex: caching $(getObject). I also changed all instances of ‘jQuery’ to ‘$’ since the plugin closes the value of ‘$’ to ‘jQuery’ anyways. This helps minifiers. Also, the $.css module now takes an object since jQuery 1.4. If backwards compatablility is important, those calls should be chained to the same selector instead of calling $(options.oSelector + ‘ .scrollFixIt’) so many times; Much faster and easier to read.

Feb 7, 2011

Julien says:

Hello,

I’d like to use this nice plugin on a wordpress site of mine but I’m not sure how to proceed. Do I have to call the script on my sidebar.php? And where shall I put the js files? In the js folder of my template?

Some help would be greatly appreciated :)

Feb 7, 2011

Matt Ward says:

Hey Julien

Including the JS in the js folder of your template is probably the best place to put it. As for the JS call, I would put that either in your header file or in your footer, depending on how you like to work with JavaScript calls. Feel free to check out my source code to see what I mean.

Thanks

Feb 22, 2011

Lu Nelson says:

Hi, this is exactly something I was looking for; but I can’t quite get it to work. I can tell something is happening because inline styles are being applied and the ‘circumflex’ character shows up, but the div doesn’t move.

Can you be more specific as to the positioning of the parent and/or child elements that we want to float? i.e. what is required? I’m sure the positioning structure of my site must be causing this to fail somehow.

It’s a tumblr template I’m developing. I put the link below in my “website” field; if you could have a look at it with Firebug or something you’d probably see what is wrong, but it’s over my head unfortunately.

Thanks for any help,

LMN

Feb 23, 2011

Lu Nelson says:

Hmm. The link to my site might not work for the next couple of day cause it’s changing to my domain name lunelson.net. It should work by the end of the week. Sorry, bad timing.

Mar 4, 2011

Michelle says:

Hi, have implemented the scroller& it works great. However when using with the 960 gs as a header scroller it shows the text within the lower grids on top of the scroller. Does anyone have any ideas how to fix this? also having an issue with scrolling back to top the header does not go all the way to top again just hovers about 100px south of where it should be. Please help.

Apr 5, 2011

Stef says:

Hi, your plugin is amazing.
One question though: why does it function on all browsers (on a mac) but not on the iphone & ipad?

Apr 13, 2011

Jesper says:

Change:
jQuery(getObject).parent().position().top

to:
jQuery(getObject).parent().offset().top

inside your window scroll listener. I’ve had some issues with scolling headers inside some div’s and this cleared it up

Apr 13, 2011

Jesper says:

Also

this.css(‘position’,'relative’);

should be outside

if(options.unstick == true){

Otherwise it won’t work if unstick is set to false…

Jun 19, 2011

Frances Cherman says:

I agree with Matt. I found this page while looking for a way to make a div scroll…but within limits. Position:fixed didn’t cut it. Thanks, Matt. This is EXACTLY what I was looking for.

Jul 29, 2011

Mark says:

I’ve made a Mootools port of this wonderful plugin. You can find it at http://code.google.com/p/contained-sticky-scroll/ . You can see it working at http://www.verbs.cat/ .

Aug 4, 2011

Irfan says:

Awesome plugin … thanks for sharing ….I got what I’m looking for so keep sharing.

Sep 1, 2011

teppei says:

nice plugin!
I will use it.
thank you.

Sep 9, 2011

Ant Eksiler says:

I would like to achieve this effect:
http://tobiasahlin.com/blog

But every floated element starts floating at the same time with your plugin. Is there any way we can modify it to look like the same on the above link?

Sep 14, 2011

Andy says:

Love it – but how do I change the easing? And do i need to include jquery.easing.1.3.js? I want it to stay static rather than ease – is this possible?

Sep 15, 2011

Matt Ward says:

Hey all. Just wanted to say a quick thank you to everyone who has downloaded this plugin and shared their thoughts with me. I’ve kind of neglected this for a while, but I am planning on digging into it sometime soon and developing a more robust version, taking all your thoughts and comments into account!

Jan 18, 2012

Joan says:

So cute and easy to install, thanks alot for sharing.

Feb 1, 2012

Schmoove says:

I’m wondering if Contained Sticky Scroll is free also for commercial use? Meaning to be used on a commercial website? Or is this plugin only free for personal use?

Feb 6, 2012

Matt Ward says:

Hey man. Yeah it’s free for commercial use.

Feb 13, 2012

thrashnoshado says:

its possible use this with a horizontal scroll?

Feb 15, 2012

Matt Ward says:

Not really. I mean some of the same principles would apply, but the plugin would need to be dramatically rewritten.

Mar 10, 2012

JP says:

Nice plugin!

I’m trying to use it for multiple elements on the page. For example, for titles of different articles, as we can see here: http://www.girlfriendnyc.com .

Do you see any way I could apply it to multiple elements? So far, I can only make it move for ALL the elements (“sidebars”) at once.

Thanks in advance!

Mar 18, 2012

Oli says:

Hey, this seems to be exactly what I am looking for but was just wondering if you had any more detailed steps on how to include it on a tumblr page? Cheers

Apr 26, 2012

Ben Johnson says:

When I look at the plugin code I see that you have: $(getObject).parent().position().top – 30

What is the “30″ for?

Apr 26, 2012

Matt Ward says:

Its an offset value that I used to keep the sticky item 30 px from the top of the window. This should probably be changed to work as an option rather than being hardcoded.

May 15, 2012

alan says:

hey!! crongratulations and thanks..its posible to use it without de easing?, i mean, like it was only with position fixed..you know what i men?

May 15, 2012

Matt Ward says:

It is possible, but not with the way the plugin is currently written. The basic logic structure an likely be used, but it would need to be rewritten to use position: fixed intelligently.

Jun 14, 2012

Sharma says:

Thanks a lot I tried a couple of STicky Scrolls but all of them had issues in one browser or the other but this one is working great….in all…GR8 job !!!!!!!

Jun 23, 2012

Yogi says:

It reminds me of the old days when we use a million lines of JavaScript codes to make a similar-yet-less-cool effect. This definitely makes our lives much easier. Five lines max. Really?!

Awesome job!

Leave a Comment

Copyright © Echo Enduring Media 2009-2014