スティッキーのときにスティッキーキットが点滅する

Question

sticky-kit v1.1.2を使用してテストページに表示されるadsense広告があります。

Chromeブラウザを使用しているページを下にスクロールすると、スティッキーキットが固まったときに広告がフラッシュ/リロードされます。

このtrouble shooting guideは、私が経験している正確な問題に対処しているようですが、自分のコードでは機能しません。

マイコードが下に表示されます。彼らは挿入する場所私はわからないですので、私は意図的に（私は私のために多くのシナリオが、どれも仕事をしようとしている）、2次の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を使用しています）あなたの質問でそのsolutionが動作するように設定する方法を次に示します。これにより

$("#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ライブラリで同様の問題がありました。念のために、むしろrelative` `よりinherit``に `position`を設定するには、それは良いこと_may_ unbottom`イベントコールバック：` sticky_kit中に

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

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