Stick Anything You Want To The Top On Scroll - jQuery StickMe
File Size: | 67.1 KB |
---|---|
Views Total: | 947 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
StickMe is a lightweight and simple-to-use jQuery Sticky Element plugin that makes any elements (e.g. header navigation, sidebar widget) fixed on the top when you scroll past them.
How to use it:
1. Load the minified version of the StickMe plugin after loading the latest jQuery JavaScript library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/js/jquery.stickme.js"></script>
2. Add the CSS class 'stickme' to the target element which should be Stick on page scroll.
<nav class="stickme"> I'm a sticky navigation </nav> <aside class="stickme"> I'm a sticky sidebar widget </aside>
3. Call the function and the plugin will do the rest.
$(function(){ $.stickme(); });
4. You can also initialize the plugin without the 'stickme' class.
<nav class="nav"> I'm a sticky navigation </nav> <aside class="aside"> I'm a sticky sidebar widget </aside>
$.stickme({ target: $('.nav') }); $('.aside').stickme();
5. Determine the distance from the top when the element gets fixed. Default: 0.
$('.aside').stickme({ top: 10 });
6. Destroy the plugin.
var stickedElement = $('.aside').stickme(); stickedElement.destroy();
7. Callback functions which will be fired depending on the current sticky status.
$('.aside').stickme({ onStick: function(e, target) { // do something }, onUnstick: function(e, target) { // do something } });
8. Event handlers.
var stickedElement = $('.aside').stickme(); stickedElement.on('onStick', function(e, target) { // do something }); stickedElement.on('onUnStick', function(e, target) { // do something }); stickedElement.on('onDestroy', function(e, target) { // do something });
This awesome jQuery plugin is developed by martinmethod. For more Advanced Usages, please check the demo page or visit the official website.