ページスクロールに基づいて要素をスティック/アンスティック

Question

https://github.com/garand/stickyを使用すると、スクロール時に画面の上部に要素を貼り付けることができます。それはかなりうまくいくが、私がページの特定の部分に到達したときに同じ要素をはじき飛ばすために、$("#sticker").unstick();機能を使用しようとしている。

どうすればこの問題を解決できますか？

ここまでは私がこれまで行ってきたことです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script src="url/sticky.min.js"></script> 
<script> 
    $(document).ready(function(){ 
    $(".banner").sticky({topSpacing:60}); 
    $(".banner").unstick(); 
}); 
</script> 

<div class="banner"><img src="addresstoimage.jpg"></div> 

Answer 1

stickyプラグインが自動的に固執し、あなたのために引き離すます。

topSpacingとbottomSpacingの両方のパラメータを設定する必要があります。要素はこれらの2つの位置の間に固定されます。

$(document).ready(function() { 
    $(".banner").sticky(
     { 
      topSpacing: 60, 
      bottomSpacing: 100 
     }); 
});