페이지 스크롤을 기준으로 요소 고정/고정 해제

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 매개 변수를 모두 설정해야 요소가 두 위치 사이에 고정됩니다.

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