Sticky

jQuery

Basic Examples

Sticky allows you simplicity and flexibility when working with elements you want stuck to a certain point on your page when scrolling. The simplest way to stick an element is like so:

$('#sticky').sticky();

Scroll down to see this example in action.

Using Sticky Methods

The below examples have two sticky elements. Utilising the onscroll, onscrolltopstart and onscrolltopend methods we can then interact with other elements on the page. These two elements have also been constrained to their parent. See the code below after the race...

Code

$('#runner-green').sticky({
  track:              'y',
  constrainTo:        'parent',
  bufferTop:          200,
  bufferBottom:       -200,
  onscroll:           run,
  onscrolltopstart: function( sticky ) {
    $(sticky.elem).css('background-position', '0 0px');
    $('#line').css('background-position', '0 0');
    $('#sticky .text').text('Sticky!');
  },
  onscrolltopend: function( sticky ) {
    $(sticky.elem).css('background-position', '0 -810px');
    $('#line').css('background-position', '0 -151px');
    $('#sticky .text').text('Winner!');
  }
});

$('#runner-pink').sticky({
  track:            'y',
  constrainTo:      'parent',
  bufferTop:        200,
  bufferBottom:     -200,
  onscroll:         run,
  onscrolltopstart: function( sticky ) {
    $(sticky.elem).css('background-position', '0 0px');
    $('#sticky .text').text('Sticky!');
  },
  onscrolltopend: function( sticky ) {
    $(sticky.elem).css('background-position', '0 -810px');
    $('#sticky .text').text('Whoops!');
  }
});