Question

我有这个HTML：

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

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

我正在尝试制作.content_to_stick，以获得位置：固定直到达到.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的部分1}}。尝试切换条件

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

指定从静态更改为固定的点

1 个答案: