FloatThead表隨着它上面

一個可摺疊的div我有一個包含大量數據的一個表。滾動時，我需要一種方法來鎖定頁面頂部的表格標題。我使用窗口滾動和固定位置在頁面中引入了FloatThead jquery類，它工作的很好。FloatThead表隨着它上面

不過，我有一個有600px的高度可摺疊股利和表是對低於此。裝入div的頁面已摺疊。當我點擊按鈕切換div時，表頭停留在div的中間，在原始位置，直到發生鼠標滾輪事件，然後標題移動到表格的開頭。當我點擊摺疊div時也會發生同樣的情況。

固定任何的幫助將是巨大的。

jQuery的

<script> 
    fl(document).ready(function(){ 
     fl(".sticky-header").floatThead({position: 'fixed'}); 
    }); 

    o(function(){ 
     o('.dashLegend').click(function(){ 
      o(this).parent().find('.content').slideToggle("slow"); 
      var text = document.getElementById("dash").innerHTML; 
       if(text == "Click to Hide Statistics Table") { 
        document.getElementById("dash").innerHTML = "Click to Show Statistics Table"; 
       } else if(text =="Click to Show Statistics Table") { 
        document.getElementById("dash").innerHTML = "Click to Hide Statistics Table"; 
       } 
     }); 
    }); 
</script>

HTML

<fieldset> 
    <legend class="dashLegend" style="color:#0000EE;" id="dash">Click to Show Statistics Table</legend> 
    <div class="content" style="height:600px;">content</div> 
</fieldset> 

<table class="table sticky-header move" id="tableBorder" border="0" cellpadding="0" cellspacing="0"> 
    <thead> 
     <tr class="alignBottom" > 
      <th class="noBottomBorder alignBottom" id="nameTh" onClick="changeNameArrow()" style="width: 20%;"><img id="nameArrow" src="images/UpAndDown1.png" >Name</img></th> 
      <th class="noBottomBorder">Grade When Administered</th> 
      <th class="noBottomBorder">Gender</th> 
      <th class="noBottomBorder">Ethnicity</th> 
      <th class="noBottomBorder alignBottom" id="elaTh" onClick="changeELAArrow()"><img id="ELAArrow" src="images/UpAndDown1.png" />PASS ELA Scale Score</th> 
      <th class="noBottomBorder">PASS ELA</th> 
     </tr> 
    </thead> 
    <tbody><tr><td>content</td></tr></tbody> 
</table>

來源

2016-03-07 user3163084

研究發現，被包括在我以前錯過了floatthead類了一個解決方案。這允許DOM對錶格和標題進行適當的移動。

position: 'absolute'

，而不是

position: 'fixed'

來源

2016-03-08 19:05:24 user3163084

FloatThead表隨着它上面

回答

相關問題