滾動時實時更新絕對定位的div

Question

讓我解釋一下情況：

有一個相對定位的sidebar 。 滾動到main-content的頂部之后，此側邊欄將變為絕對 ，然后實時更新到窗口的頂部位置（窗口的scrollTop）。

問題在於它確實很慢且不穩定（在Firefox中），因為它一直在更新。 如何在沒有太多負載的情況下“實時”更新位置？

當前看起來像這樣：

var headerOffset = $('#main-content').offset().top;
$(document).on('scroll', function() {
  if( ($(document).scrollTop() + 15) > $('#main-content').offset().top ){
    $('#sidebar').addClass('fixed');
    $('#sidebar').css('top', ( $(document).scrollTop() - headerOffset) + 15 );
  } else {
    $('#sidebar').removeClass('fixed');
  }
});

提前致謝 ：）

Answer 1

您應該使用來自twitter bootstrap 的詞綴 ： Bootstrap的詞綴

Answer 2

那這個呢 ：

=> http://jsfiddle.net/8XVXj/1/或完整示例： http : //jsfiddle.net/8XVXj/2/

var headerOffset = $('#main-content').offset().top;
$(document).on('scroll', function(){
 if( ($(document).scrollTop() + 15) > $('#main-content').offset().top ){
   if($('#sidebar').hasClass('fixed') === false) {
     $('#sidebar').addClass('fixed');
     $('#sidebar').css('top', ($(document).scrollTop() - headerOffset) + 15 );
   }
 } else {
   $('#sidebar').removeClass('fixed');
 }
});

我只添加一次固定的位置。

Answer 3

萬一您想做所有Javascript麻煩事是因為您有不可預測的標頭，並且不知道主要內容的確切位置，不足以將cc設置為固定，並僅在啟動時計算位置。

var headerOffset = $('#main-content').offset().top;
$('#sidebar').css('top', headerOffset);

就像這里： http : //jsfiddle.net/4amdr/

這就是我可以想象的唯一方法，為什么您不想使用固定的頂部而將js留在外面。