div位置固定在滾動條上，在頁面頂部之前開始

Question

如何讓「Sidebar」在到達「固定標題」而不是頁面頂部時變爲固定位置？

jsfiddle

$(function() { 
    var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0)); 
    var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0)); 

    var maxY = footTop - $('#sidebar').outerHeight(); 

    $(window).scroll(function(evt) { 
     var y = $(this).scrollTop(); 
     if (y > top) { 
      if (y < maxY) { 
       $('#sidebar').addClass('fixed').removeAttr('style'); 
      } else { 
       $('#sidebar').removeClass('fixed').css({ 
        position: 'absolute', 
        top: (maxY - top) + 'px' 
       }); 
      } 
     } else { 
      $('#sidebar').removeClass('fixed'); 
     } 
    }); 
}); 

Answer 1

這條線：

if (y > top) { 

假設你的固定標題沒有填充（否則你就必須考慮到這一點爲好），你可以改變這個

if (y >= top - $('#fixedHeader').height()) { 

刪除top:0px;從側邊欄的CSS，並加上預計高度爲您的固定頭（目前你已經給它40像素的高度），所以

#sidebar.fixed { 
    position: fixed; 
    top: 40px; 
} 

我也從#fixedHeader移除填充，因爲你沒不指定它是什麼/如果你甚至想要任何。如果您確實需要填充，如上所述，您還必須將其添加到您的計算中。

http://jsfiddle.net/VtPcm/706/