粘性套件閃爍粘性

Question

我有一些使用sticky-kit v1.1.2在測試頁上顯示的adsense廣告。

當我向下滾動頁面（我使用的是Chrome瀏覽器）時，當sticky-kit變粘時，廣告會閃爍/重新加載。

我已閱讀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: false）：

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

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