jquery.stickybox

This plugin is based on Remy Sharp’s Fixed Floating Elements snippet. See the index.html file for examples.

Usage

General initialization:

$(selector).stickybox(options);

You can also dynamically remove the functionality of the plugin by calling the destroy method:

$(selector).stickybox('destroy');

Options

• fixedClass: ‘fixed’, // class applied when window has been scolled passed threshold
• bottomClass: ‘bottom’, // class applied when stickybox element reaches bottom of context container
• context: function(){} // unique container (should have position:relative;) returns ‘body’ by default.
• offset: 0 // if your .fixed style has a top value other than 0, you’ll need to set the same value here.
• captured: function(){}, // callback function for when fixedClass is applied
• released: function(){}, // callback function for when fixedClass is removed
• bottomCaptured: function(){}, // callback function for when bottomClass is applied
• bottomReleased: function(){} // callback function for when bottomClass is removed

Your styles should be associated with the fixedClass and bottomClass classes. The required CSS follows:

.fixed    { position: fixed; top: 0; }
.bottom   { position: absolute; top: auto; bottom: 0; }

The context option is a function that should return a jquery object. It is passed the relevant stickybox as a parameter. In most instances you’ll want to return one of it’s closest parents. If you do not specify this option, the body element is used.

$('.stickybox').stickybox({
    context: function(elm){
        return elm.parents('.content');
    }
});