This time I will share jQuery Plugin and tutorial about Stick Anything You Want To The Top On Scroll – jQuery StickMe, hope it will help you in programming stack.
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.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<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.
2 |
I'm a sticky navigation |
5 |
<aside class="stickme"> |
6 |
I'm a sticky sidebar widget |
3. Call the function and the plugin will do the rest.
4. You can also initialize the plugin without the ‘stickme’ class.
2 |
I'm a sticky navigation |
6 |
I'm a sticky sidebar widget |
5. Determine the distance from the top when the element gets fixed. Default: 0.
6. Destroy the plugin.
1 |
var stickedElement = $('.aside').stickme(); |
3 |
stickedElement.destroy(); |
7. Callback functions which will be fired depending on the current sticky status.
2 |
onStick: function(e, target) { |
5 |
onUnstick: function(e, target) { |
8. Event handlers.
01 |
var stickedElement = $('.aside').stickme(); |
03 |
stickedElement.on('onStick', function(e, target) { |
07 |
stickedElement.on('onUnStick', function(e, target) { |
11 |
stickedElement.on('onDestroy', function(e, target) { |
This awesome jQuery plugin is developed by martinmethod. For more Advanced Usages, please check the demo page or visit the official website.
