javascript - 静的から固定に変更するポイントを指定する

Question

私はこのhtmlを持っています:

<div class="content">
 <div class="content_to_stick"></div>
</div>

<div class="footer"></div>

私は.content_to_stickを作成しようとしています.position:fixedが.footerに到達するまで固定されていますが、まったく理解できません。これは私が使用するjQueryです：

 jQuery(function(){
    var stickyRibbonTop = jQuery('.content_to_stick').offset().top;
    jQuery(window).scroll(function(){
            if( jQuery(window).scrollTop() > stickyRibbonTop ) {
                    jQuery('.content_to_stick').css({position: 'fixed', top: '0px'});
            } else if(jQuery(window).scrollTop() > jQuery('.footer').offset().top ) {  
                     jQuery('.content_to_stick').css({position: 'static', top: '0px'});   
            } else {
                    jQuery('.content_to_stick').css({position: 'static', top: '0px'});
            }
    });
    });