粘性试剂盒粘稠时闪烁

Question

我使用sticky-kit v1.1.2 在测试页面上显示了一些adsense广告.

当我向下滚动页面时(我使用的是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');
})

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

这样，我就不会注意到Firefox或Chrome中有任何闪烁。

我建议作为测试，尝试将广告放在此JSFiddle中（与上面的代码段相同的代码）：https ://jsfiddle.net/2jkf4qcr/1/ 。

Answer 2

我在sticky-kit 库中遇到了类似的问题。解决方案是不使用垫片 ( spacer: false)：

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

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