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

Answer 2

我遇到了与sticky-kit库类似的问题。解决方案是不使用spacer（spacer: false）：

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

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

粘性试剂盒粘稠时闪烁

2 个答案: