Sticky Readme

About ↑ Back to top

Sticky helps to keep handy elements on the page while scrolling. Handy for persistent navigation and advertising.

Features ↑ Back to top

Declare an element Sticky; keep it within the page or within a parent element
Support for scrolling on both the X and/or Y axis
Supports changeable sticky type: 'absolute' and 'fixed'
Sticky specific methods allow you to trigger at various sticky events
Compatible in Firefox, Safari, Chrome and IE6+

Known Issues ↑ Back to top

In Webkit powered browsers there seems to be a funny issue regarding scrollLeft and the Sticky element's background (only noticeable if the background is not transparent)
A 'flash of unstyled text' (FOUT) in Firefox can throw off offsets and positions

API Settings ↑ Back to top

Default Values

type:                   'auto',
track:                  'xy',
bufferLeft:             0,
bufferTop:              0,
bufferRight:            'width',
bufferBottom:           'height',
constrainTo:            '',
oninit:                 function(){},
onscroll:               function(){},
onscrolltopstart:       function(){},
onscrolltopend:         function(){},
onscrollleftstart:      function(){},
onscrollleftend:        function(){}

type: auto | absolute | fixed

The type of sticking operation.
Default: auto

auto Figures out the best sticking operation depending on the browser
absolute Sticks elements using absolute measurements relative to the document
fixed Sticks elements using fixed measurements relative to the screen

track: x &| y

Which axes to track.
Default: xy

bufferLeft: integer

The space left of the element to start scrolling.
Default: 0

bufferTop: integer

The space above the element to start scrolling.
Default: 0

bufferRight: integer

The space right of the element to stop scrolling.
Default: 0

bufferBottom: integer

The space below element to stop scrolling.
Default: 0

constrainTo: parent | element

The element to use as the boundary box for the stickied element. element
Default: undefined

oninit: function( stickyObject )

Function to trigger when the element has been stickied.
Default: function(){}

onscroll: function( stickyObject )

Function to trigger when the $(window).scrollLeft() or $(window).scrollTop() is within the stickied element's scroll area.
Default: function(){}

onscrolltopstart: function( stickyObject )

Function to trigger when the element reaches its highest point within its scroll area on the Y axis.
Default: function(){}

onscrolltopend: function( stickyObject )

Function to trigger when the element reaches its lowest point within its scroll area on the Y axis.
Default: function(){}

onscrollleftstart: function( stickyObject )

Function to trigger when the element reaches its highest point within its scroll area on the X axis.
Default: function(){}

onscrollleftend: function( stickyObject )

Function to trigger when the element reaches its highest point within its scroll area on the X axis.
Default: function(){}

stickyObject

The object returned when triggering a sticky event.

{
  elem:               element,
  scrollTop:          $(window).scrollTop(),
  scrollLeft:         $(window).scrollLeft(),
  scrollTopAmount:    $(window).scrollTop()-$.data(element, 'scrollTop'),
  scrollLeftAmount:   $(window).scrollLeft()-$.data(element, 'scrollLeft')
}

API Data ↑ Back to top

Specific data about the stickied element is attached to it using the jQuery.data() or jQuery.fn.data() methods. This data can be both set and retrieved.

To view all the data attached to an element, use console.log( $.data(elem) );

document.stickyDebug: boolean

Enable the debug output for stickied elements. Good idea to call this first before sticking any elements.
Default: 0

Usage

$.data(document, 'stickyDebug', 1);

element.stickyType: absolute | fixed

The sticking type.

$.data(element, 'stickyType');

element.stickyTrackX: boolean

Track the X axis.

$.data(element, 'stickyTrackX');

element.stickyTrackY: boolean

Track the Y axis.

$.data(element, 'stickyTrackY');

element.scrollLeft: integer

The X co-ordinate start of the scroll area.

$.data(element, 'scrollLeft');

element.scrollTop: integer

The Y co-ordinate start of the scroll area.

$.data(element, 'scrollTop');

element.scrollRight: integer

The X co-ordinate end of the scroll area.

$.data(element, 'scrollRight');

element.scrollBottom: integer

The Y co-ordinate end of the scroll area.

$.data(element, 'scrollBottom');

element.bufferLeft: integer

The amount to offset the start of the scroll area on the X axis.

$.data(element, 'bufferLeft');

element.bufferTop: integer

The amount to offset the start of the scroll area on the Y axis.

$.data(element, 'bufferTop');

element.bufferRight: integer

The amount to offset the end of the scroll area on the X axis.

$.data(element, 'bufferRight');

element.bufferBottom: integer

The amount to offset the end of the scroll area on the Y axis.

$.data(element, 'bufferBottom');

element.constrainTo: element

The element to constrain the stickied element to.

NOTE: The scroll area is taken from this element so setting it to a different element after the initialisation won't change the stickied element's scroll area.

$.data(element, 'constrainTo');

element.originLeft: integer

The stickied element's original X start co-ordinate. This is relative to the parent/constrainTo element if position:relative or position:fixed, or relative to the document if parent/constrainTo element is position:absolute.

$.data(element, 'originLeft');

element.originTop: integer

The stickied element's original Y start co-ordinate. This is relative to the parent/constrainTo element if position:relative or position:fixed, or relative to the document if parent/constrainTo element is position:absolute.

$.data(element, 'originTop');

element.originRight: integer

The stickied element's original X end co-ordinate. This is relative to the parent/constrainTo element if position:relative or position:fixed, or relative to the document if parent/constrainTo element is position:absolute.

$.data(element, 'originRight');

element.originBottom: integer

The stickied element's original Y end co-ordinate. This is relative to the parent/constrainTo element if position:relative or position:fixed, or relative to the document if parent/constrainTo element is position:absolute.

$.data(element, 'originBottom');

Sticky

jQuery