FloatThead 表，上面有一个可折叠的 div答案

【问题标题】：FloatThead Table With a collapsible div above itFloatThead 表，上面有一个可折叠的 div
【发布时间】：2016-03-07 16:18:54
【问题描述】：

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

但是，我有一个高度为 600 像素的可折叠 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>

【问题讨论】：

标签： jquery html jquery-plugins slidetoggle

【解决方案1】：

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

position: 'absolute'

而不是

position: 'fixed'

【讨论】：

对我的应用没有任何影响

【解决方案2】：

我遇到了与您描述的完全相同的问题，并尝试更改 position 值并将 autoReflow 设置为 true，但都没有纠正页面上另一个元素更改的问题，导致浮动标题的位置在页面上进行更改。

我需要提出一个修复程序，使我能够在包含浮动标题的面板上方保留引导可折叠面板的动画。

我的解决方案如下：

当破坏面板之一展开或折叠时，通过将不透明度设置为零来隐藏浮动标题，避免使用 display: none 以保留 floatThead 浮动标题的定位/内部工作。这可以防止在 DOM 对象仍在转换（即展开/折叠）时出现丑陋的显示，但会保持整体布局不变。
转换完成后，在我的主仪表板表上手动触发reflow event，即$table.trigger('reflow');，以强制插件重新对齐浮动标题。
在我的页面上执行回流事件似乎需要大约 0.1 或 0.2 秒，所以用简短的 setTimeout 包裹起来，快速将浮动标题淡入。

对我很有魅力。请参阅我为实现此目的而编写的 javascript：

// when one of the panels above the dashboard is expanded or collapsed,
// set the floating header opacity to zero
$('#disruptivePanels .collapse').on('hide.bs.collapse show.bs.collapse', function () {
    $('.kv-thead-float').css('opacity', 0);
});

// trigger position reflow on main dashboard floating header, then fade back into view
$('#disruptivePanels .collapse').on('hidden.bs.collapse shown.bs.collapse', function () {
    $('#dashboardMain table').trigger('reflow');
    setTimeout(function() {
        $('.kv-thead-float').fadeTo(200, 1);
    }, 400);
});

【讨论】：