Вспышки с липким набором, когда они липкие

У меня есть реклама adsense, отображаемая на тестовой странице с помощью sticky-kit v1.1.2.

Когда я просматриваю страницу (я пользуюсь браузером Chrome), реклама начинает мигать/перезагружаться, когда липкий набор становится липким.

Я прочитал этот руководство по устранению неполадок, которое, похоже, касается точной проблемы, с которой я столкнулся, но не работает для моего кода.

Мой код отображается ниже. Я преднамеренно оставил два следующих div, потому что я не уверен, куда их следует вставить (я пробовал много сценариев, но никто не работает для меня):

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

Вот мой код HTML:

<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>

Вот мой код JQ:

// 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');
})

Ответ 1

Ниже показано, как это решение в вашем вопросе должно быть настроено для работы (здесь я использую iframe для имитации ваших объявлений).

$("#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>

Ответ 2

У меня была аналогичная проблема с липкой библиотекой. Решение заключалось в том, чтобы не использовать разделитель (spacer: false):

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

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