Troubleshooting

Here are some common issues you might run into

Please don't open issues for these, this is expected behavior. If you open an issue with one of these problems without saying you read this guide it will be closed immediately.

Please read the sticky-kit documentation, it covers many of these topics.

My ads/iframe/plugin based content flashes or get removed when it becomes sticky

sticky-kit uses a spacer element in place of the existing element to reliably take up the same amount of space in the dom when it sticks something. In order to add the spacer element when none is provided, it re-orders the dom, moving your element into the spacer element, leaving the spacer element in the place of the orginal elment.

Due to how plugins and iframes work, this may cause them to reload. If you want the dom hierarchy to be left alone you must provider a spacer element. Your markup should look something like this:

<div class="sticky-parent">
  <div class="sticky-spacer">
    <div class="my-sticky-element">Hello world</div>
  </div>

  .. the rest of the page ...
</div>

When when instantiating the element you can then specify the spacer element:

$(".my-sticky-item").stick_in_parent({
  parent: ".sticky-parent", // note: we must now manually provide the parent
  spacer: ".sticky-spacer",
});

If your element is stuck in a way such that a spacer element is not required (because the dom element did not originally take up any space in the flow of the page) you can disable the spacer by passing false:

$(".my-sticky-item").stick_in_parent({
  spacer: false
});

As always, you can find out how use sticky-kit and it's parameters from the reference guide: http://leafo.net/sticky-kit/#reference

My sidebar/sticky bar overlaps the content or footer of the page

sticky-kit uses very aggressive caching to avoid doing any size calculations on each scroll of the page. This will ensure that the scroll handler inserted by sticky kit is not inserting any scrolling lag into the page. If the caching gets out of date then the sticky positions may appear broken. This happens when things on the page change size after you've loaded sticky kit.

You can tell sticky kit to recalculate by triggering the following event on the body:

$(document.body).trigger("sticky_kit:recalc");

sticky-kit will automatically recalc in a lot of scenarios, but it can't detect everything about your page. If the overall height of the body is changed, or the size of the viewport is updated, sticky-kit will automatically recalc.

If you have dynamically loading items on the page that do not have a fixed size that aren't caught by the automatic check then you'll need to manually recalc when they're loaded. This includes images, unless you've specified their size up front.

You can also tell sticky-kit to recalc on every scrollevent as a last ditch effort, but be warned your scrolling performance may suffer. Pass the recalc_every option with a value of 1 to recalculate on every scroll event:

$(".my-sticky-element").stick_in_parent({recalc_every: 1});

As always, you can find out how use sticky-kit and it's parameters from the reference guide: http://leafo.net/sticky-kit/#reference

How do I disable the sticky element on my responsive page

You must manually enable and disable the sticky element in javascript for the different responsive breakpoints. You'll want to code a onresize handler that checks the width (or height) of the viewport and turns sticky-kit on or of off depending on the effect you're trying to accomplish.

You can turn off sticky kit with the following code:

$(".my-sticky-element").trigger("sticky_kit:detach");

As always, you can find out how use sticky-kit and it's parameters from the reference guide: http://leafo.net/sticky-kit/#reference