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'});
            }
    });
    });

Answer 1

那是因为当您到达时.footer $(window).scrollTop()仍然大于stickyRibbonTop并且您的代码将永远不会到达它设置position回的部分static。尝试切换条件

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