在滾動時將表格標題固定到窗口頂部，跳轉/跳過一行。 jQuery

Question

請參閱我創建的jsfiddle以複製我的問題。 http://jsfiddle.net/motocomdigital/22KFS/3/

在我的項目中，我創建了一個可排序的表格。我使用jquery table sorter來做到這是一個非常簡單的jquery插件。桌面分揀機也包含在jsfidde中。如果您單擊表格標題，則會注意到它將表格列從降序升序到升序。

這很好，我的問題是...

在我的生活網站，該表是大約125行高。我想避免不惜一切代價分頁。

所以我的想法是修復jQuery滾動時的表頭，這幾乎是工作。請參閱我的fiddle。我用來將頁頭修正到頁面頂部的jQuery工作。

問題是因爲表頭變得固定，表格向上移動，並使其非常糟糕。

任何人都可以幫助我消除毛刺，並在到達窗口頂部時阻止它跳過一行。

非常感謝任何幫助，謝謝。

見的jsfiddle這裏http://jsfiddle.net/motocomdigital/22KFS/3/

jQuery的

var $window  = $(window), 
    $tableHead = $(".table-head"), 
    offset  = $tableHead.offset(); 

$window.scroll(function() { 
    if ($window.scrollTop() > offset.top) { 
     $tableHead.addClass('fixed'); 
    } else { 
     $tableHead.removeClass('fixed'); 
    } 
}); 

CSS

.fixed { 
    position: fixed; 
    top: 0; 
} 

HTML

<table id="table-sorter" width="400" border="0" cellspacing="0" cellpadding="10">   
    <thead> 
      <tr class="table-head"> 
       <th width="100" height="18" valign="middle">Number</th> 
       <th width="100" height="18" valign="middle">First Name</th> 
       <th width="100" height="18" valign="middle">Surname</th> 
       <th width="100" height="18" valign="middle">System</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
       <td>1</td> 
       <td>John</td> 
       <td>Smith</td> 
       <td>Wordpress</td>  
      </tr> 

      ... ... 

    </tbody> 
</table> 

Answer 1

解決您的問題。如果你還沒有意識到，它跳轉的原因是因爲當你修改位置時，你實際上是從表格中刪除標題行，所以表格的其餘部分跳轉到填補空白。

解決方案？那麼，這是爭論。爲了證明我的觀點，我所做的只是在修正實際標題時添加一個新的臨時標題。這使桌子保持原位並允許標題向下移動。當您向後滾動時，該臨時標題將被刪除。

這是最好的方法嗎？不確定，你可能想要克隆真正的頭文件作爲臨時解決方案，以防出現圖形故障。這也意味着，如果標題有多行（因此將高度向下推），則效果會保持不變，因爲它正在採取精確的克隆。

無論如何，在與代碼：http://jsfiddle.net/chricholson/22KFS/5/

$("#table-sorter").tablesorter({ 
widgets: ['zebra'] 
}); 


var $window  = $(window), 
    $tableHead = $(".table-head"), 
    offset  = $tableHead.offset(); 

$window.scroll(function() { 


    if ($window.scrollTop() > offset.top) { 
     $tableHead.addClass('fixed'); 
     if ($('#table-sorter thead tr.temp').length <= 0){ 
      $('#table-sorter thead').append('<tr class="temp"><td>hello</td></tr>'); 
     } 
    } else { 
     $tableHead.removeClass('fixed'); 
     $('tr.temp').remove(); 
    } 


}); 

好運。

編輯

下面是使用克隆（） http://jsfiddle.net/chricholson/22KFS/8/

代碼工作產品：

$("#table-sorter").tablesorter({ 
    widgets: ['zebra'] 
}); 


var $window  = $(window), 
    $tableHead = $(".table-head"), 
    offset  = $tableHead.offset(); 

$window.scroll(function() { 


    if ($window.scrollTop() > offset.top) { 
     $tableHead.addClass('fixed'); 
     if ($('#table-sorter thead tr.temp').length <= 0){ 
      $tableHead.clone().appendTo('#table-sorter thead').removeClass('fixed').addClass('temp'); 
     } 
    } else { 
     $tableHead.removeClass('fixed'); 
     $('tr.temp').remove(); 
    } 


}); ​