Sticky-kit problem

is a wonderful jQuery plugin for making sticky elements. Created by Leaf.

Sticky kit is a super handy jQuery plugin by Leaf that makes it easy to create sticky elements. All you need to do is call stick_in_parent on the element you want to stick, and it’ll stay inside its parent container, no matter what. Simple, right?

The problem

I was using Sticky Kit with Bootstrap v3.3.7, and things were going great—until I scrolled to the bottom of the page. For some weird reason, the sticky element (red boxes in my case) just disappeared. Poof! It was gone. This was obviously not what I wanted.

The fix

I don’t know a ton about JavaScript, but I dug into the code to figure out what was going wrong. After a bit (okay, a lot) of trial and error, I came up with a solution. Here’s the code I used to fix it:

function activeStickyKit() {
  $('[data-sticky_column]').stick_in_parent({
      parent: '[data-sticky_parent]'
  });

  // bootstrap col position
  $('[data-sticky_column]')
  .on('sticky_kit:bottom', function(e) {
      $(this).parent().css('position', 'static');
  })
  .on('sticky_kit:unbottom', function(e) {
      $(this).parent().css('position', 'relative');
  });
};

This tweak made sure the sticky part stayed visible, even when I scrolled all the way down.

The takeaway

It took me about two weeks to figure this out, but I’m super happy with the result. Now I can use Sticky Kit with Bootstrap without worrying about disappearing elements. It was frustrating at times, but totally worth it in the end!