指定一個點，從靜態變爲固定

Question

我有這個網站：

<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。嘗試開關條件

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