The Contained Sticky Scroll plugin is designed to allow an element to stick to the top of the screen as page scrolls down, but without moving outside of the parent container.

For example, the sidebar to the right has been animated with the plugin. When you scroll down to read the different options that the plugin allows you to use, you will notice that the sidebar will actually stick to the top of the window until we scroll past the main content area and into the footer. Then the sticky scrolling will stop.

However, some users don't like this kind of sticky scrolling, so the plugin also includes a feature that allows a user to turn off the sticky scrolling, causing the sidebar to flip back to its default position. Just click the circumflex(^) to trigger this.

To initialize this plugin, simply use this basic syntax:

jQuery('.sidebar').containedStickyScroll();

Or, if you want to include custom options, write like this:

jQuery('.sidebar').containedStickyScroll({
        duration: 300,
        unstick: true,
        closeChar: 'x' 
    });

The plugin comes equipped with a number of different options:

easing String - Allows the user to set the type of easing to be used in the animation. Defaults to linear.
duration Numeric - Allows the user to set the duration of the animation. Defaults to 500
queue Boolean - Allows the user to set whether the animation is placed into the queue. If false, animation starts immediately. Defaults to false
unstick Boolean - Allows the user to turn the unstick functionality on and off. Defaults to true (on)
closeChar String - Allows the user to set the character to be used as the unstick trigger. Defaults to ^
closeTop Numeric - Allows the user to set relative position of the unstick trigger to the top of the selected element, in pixels. Defaults to 0
closeRight Numeric - Allows the user to set relative position of the unstick trigger to the right of the selected element, in pixels. Defaults to 0
oSelector (deprecated) In version 1.0, this option is was set by the plugin and contains the selector information of the selected element. It is was used for internal purposes but has been deprecated for improved performance