javascript - sticky-kit 粘时会闪烁

Question

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

当我向下滚动页面(我使用的是 Chrome 浏览器)时，当粘性工具包变粘时，广告会闪烁/重新加载。

我已阅读此 trouble shooting guide，它似乎确实解决了我遇到的确切问题，但不适用于我的代码。

我的代码显示在下面。我故意遗漏了以下两个 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

下面显示了 solution 是如何实现的在你的问题中应该设置为工作(这里我使用 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/ .