Simple jQuery Sticky Plugin - hachiko

Simple jQuery Sticky Plugin - hachiko
File Size: 138 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

hachiko is a lightweight (~2.5kb minified) and easy-to-use jQuery plugin that makes any elements sticky on the screen when scroll down the page. Instead of changing the position of the element on scroll down, this plugin creates a clone of the original element and set the clone to be fixed positioned so the original layout is always preserved.

Related plugins:

Basic Usage:

1. Include the latest jQuery library and jQuery hachiko plugin on the web page

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="jquery.hachiko.1.0.0.min.js"></script>

2. Create a container for sticky elements

<div id="sticky">...</div>

3. The javascript

<script type="text/javascript">

$("#sticker").hachiko({
top: 0 // integer value in pixels to position the element from the top after it's stickied on the screen.
});
</script>

Change log:

v1.1.0 (2013-10-08)

  • added static method to retrieve reference to "stickier"/cloned element

This awesome jQuery plugin is developed by pyuan. For more Advanced Usages, please check the demo page or visit the official website.