Stick Kit: a must use jQuery plugin for sticky elements

Stick the element is not always the same. Use position fixed on scroll is not always the solution, like I shared a way through Waypoint JS. However, tackling with some issues like scroll a container till the end of the parent container needs some other solution, stick kit is a jQuery Plugin for such issues. You can view demos here.

Stick-Kit

The plugin is quite easy to use, the basic working is based on the element that is going to be stick and the parent in which it is going to be lying. Here is the markup:

<div class='outer'>
  <main>...</main>
  <aside>...</aside>
</div>

If aside tag is need to be stick then add the following jQuery function to trigger.

$(function() {
  $("aside").stick_in_parent({
    parent: ".outer"
  });
});

What it really provides is:

• Make sure that element stick when scrolled over it.
• Make the element remain in parent even scrolling towards footer.
• Put back the element on where it belongs, as scrolled up.

It really helps when we need to stick the navigation but as soon we stick the position fixed with it, the width changes and covers the whole document but I didn't find the same problem with it. However I found some bugs related to it, here are some of them.

Bugs I encountered

• Sometimes sticky element get more upward then the position is should stay in.
• As we scroll below the parent wrap, the sticky element disappears for a while.
• Sometimes creates a scroll jam in footer side (rare but happens).

What are you concern over, must write in comments.