Skip to content

Latest commit

 

History

History
46 lines (33 loc) · 1.74 KB

README.textile

File metadata and controls

46 lines (33 loc) · 1.74 KB
Raw

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');
    }
});