jquery - FloatThead Table 上面有一个可折叠的 div

Question

我有一个包含大量数据的表。我需要一种方法在滚动时将表头锁定在页面顶部。我使用窗口滚动和固定位置在页面中合并了 FloatThead jquery 类，效果很好。

但是，我有一个高度为 600px 的可折叠 div，表格就在它的正下方。页面加载时 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>

Answer 1

找到了一个解决方案，该解决方案包含在我之前错过的 floatthead 类中。这允许对表格和标题进行操作以适当移动 DOM。

position: 'absolute'

而不是

position: 'fixed'