Create Sticky & Fading Elements On Scroll - Sticky-Elements

An advanced jQuery Sticky Element plugin that is mainly designed to stick any elements to the top of the page on scroll.

It also allows you to animate elements by fading them out when they are scrolled to the top of the page.

Thanks to the Scroll Rate option, you can also apply a parallax scroll effect to elements that move at different speeds relative to each other on vertical page scrolling.

How to use it:

1. Download and load the jquery.sticky.elements.js script from the js folder.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.sticky.elements.js"></script>

2. Apply the plugin to the target element and done.

<div id="element">
  Any Content Here
</div>

$(function(){
  $("#element").stikify();
});

3. The plugin also works absolutely positioned elements:

<div id="element" style="position: absolute; top:130px; left:400px;">
  Any Content Here
</div>

4. Determine the max height (in pixels) that the item can move up:

$(function(){
  $("#element").stikify({
    cieling: -100
  });
});

5. Determine the height where the element starts to scroll:

$(function(){
  $("#element").stikify({
    floor: 100
  });
});

6. Specify the scrolling speed:

$(function(){
  $("#element").stikify({
    rate: 1.6
  });
});

7. Determine whether or not to fade out elements on scroll.

$(function(){
  $("#element").stikify({
    trans: true
  });
});

---

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