Skip to content

yannskee/sticky

This branch is 67 commits behind garand/sticky:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

eee4060 · Jul 7, 2014

History

64 Commits
Feb 12, 2012
Apr 22, 2013
Jul 7, 2014
Feb 20, 2014
Nov 29, 2012
Nov 29, 2012
Nov 29, 2012
Jun 25, 2014

Repository files navigation

Sticky

Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible.

Sticky in brief

This is how it works:

  • When the target element is about to be hidden, the plugin will add the class className to it (and to a wrapper added as its parent), set it to position: fixed and calculate its new top, based on the element's height, the page height and the topSpacing and bottomSpacing options.
  • That's it. In some cases you might need to set a fixed width to your element when it is "sticked". Check the example-*.html files for some examples.

Usage

  • Include jQuery & Sticky.
  • Call Sticky.
<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script>
  • Edit your css to position the elements (check the examples in example-*.html).

  • To unstick an object

<script>
  $("#sticker").unstick();
</script>

Options

  • topSpacing: Pixels between the page top and the element's top.
  • bottomSpacing: Pixels between the page bottom and the element's bottom.
  • className: CSS class added to the element's wrapper when "sticked".
  • wrapperClassName: CSS class added to the wrapper.
  • getWidthFrom: Selector of element referenced to set fixed width of "sticky" element.

Methods

  • sticky(options): Initializer. options is optional.
  • sticky('update'): Recalculates the element's position.

About

jQuery Plugin for Sticky Objects

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published