sticky-kit flashes when sticky

Question

I have some adsense ads displayed on a test page using sticky-kit v1.1.2.

When I scroll down the page (I am using Chrome browser), the ads flash/reload when the sticky-kit becomes sticky.

I have read this trouble shooting guide that does seems to address the exact issue that I am experiencing, but does not work for my code.

My code is displayed below. I have deliberately left out the two following div's, because I am unsure where they should be inserted (I have tried many scenarios, but none work for me):

<div class="sticky-parent">
  <div class="sticky-spacer">
  </div>
</div>

Here is my HTML code:

<div id="id_side_advert_container" class="side_advert col-md-2">
    <div class="margin-bottom-20">

        <div id="id_side_advert_wrapper">
            {# google adsense code to display side advertiements #}
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- zoodal-side-advertisement-responsive -->
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-1234567890112987"
                 data-ad-slot="1234567890"
                 data-ad-format="auto"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
    </div>
</div>

Here is my JQ code:

// sticky-kit code for the side advertising sticky - with an offset of 15px when sticky.
$("#id_side_advert_container").stick_in_parent({
    offset_top: 15,
    parent: ".sticky-parent", // note: we must now manually provide the parent
    spacer: ".sticky-spacer",
});

// the following code is the workaround so that the sticky element does not disappear when bottom -
// taken from: https://github.com/leafo/sticky-kit/issues/31 danxshap
$('#id_side_advert_container')
.on('sticky_kit:bottom', function(e) {
    $(this).parent().css('position', 'static');
})
.on('sticky_kit:unbottom', function(e) {
    $(this).parent().css('position', 'relative');
})

Answer 1

The following shows how that solution in your question should be set up to work (here I'm using an iframe to simulate your ads).

$("#sidebar").stick_in_parent({
  offset_top: 15,
  parent: ".content", // note: we must now manually provide the parent
  spacer: ".sticky-spacer",
});

// the following code is the workaround so that the sticky element does not disappear when bottom -
// taken from: https://github.com/leafo/sticky-kit/issues/31 danxshap
$('#id_side_advert_container')
  .on('sticky_kit:bottom', function(e) {
    $(this).parent().css('position', 'static');
  })
  .on('sticky_kit:unbottom', function(e) {
    $(this).parent().css('position', 'relative');
  })

.content {
  overflow: hidden;
}

.content .sidebar {
  width: 200px;
  margin: 10px;
  margin-right: 0;
  float: left;
  overflow: hidden;
  font-family: sans-serif;
}

.content .main {
  margin: 10px;
  margin-left: 222px;
  border: 1px solid blue;
  height: 2000px;
  overflow: hidden;
}

.footer {
  margin: 10px;
  text-align: center;
  font-size: 13px;
  border-top: 1px dashed #dadada;
  color: #666;
  padding-top: 10px;
  min-height: 233px;
}

.sub {
  color: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js"></script>

<h1>Example sticky flicker fix</h1>
<div class="content">
  <div class="sticky-spacer">
    <div id="sidebar" class="sidebar">
      <em>Ads go here. <span style="color:maroon">Demo'ing with an iFrame instead.</span></em>
      <iframe frameborder="0" scrolling="no" width="100%" height="100%" src="https://unsplash.it/200/200" name="imgbox" id="imgbox">
        <p>iframes are not supported by your browser.</p>
      </iframe>
    </div>
  </div>
  <div class="main">
    This is the main column
    <p class="sub">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis ornare quam enim vel ipsum.
    </p>
    <p class="sub">
      In congue nunc vitae magna tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales venenatis. Curabitur nec est condimentum, blandit tellus nec, semper arcu. Nullam in
      porta ipsum, non consectetur mi. Sed pharetra sapien nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut semper nisl.
    </p>
    <p class="sub">
      Curabitur rhoncus, arcu at placerat volutpat, felis elit sollicitudin ante, sed tempus justo nibh sed massa. Integer vestibulum non ante ornare eleifend. In vel mollis dolor.
    </p>
  </div>
</div>
<div class="footer">
  My very tall footer!
</div>

With this I don't notice any flickering in Firefox or Chrome.

I recommend, as a test, you try placing your ads in this JSFiddle (it is the same code as the above snippet): https://jsfiddle.net/2jkf4qcr/1/.

Answer 2

I had the similar issue with sticky-kit library. The solution was to not use the spacer (spacer: false):

<div class="sticky-parent">
</div>

$("#id_side_advert_container").stick_in_parent({
    offset_top: 15,
    parent: ".sticky-parent",
    spacer: false,
});