Question

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

但是，我有一个可折叠的div，其高度为600px，桌子就在这之下。页面加载，div折叠。当我单击按钮切换div时，表头停留在div的中间，位于其原始位置，直到鼠标滚轮事件发生，然后标题移动到表的开头。当我点击折叠div时会发生同样的事情。

任何帮助解决这个问题都会很棒。

的jQuery

Route

HTML

<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>

Answer 1

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

position: 'absolute'

而不是

position: 'fixed'

Answer 2

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

我被要求提出一个修复程序，允许我保留包含浮动标题的面板上方的bootstrap可折叠面板的动画。

我的解决方案如下：

当其中一个中断面板展开或折叠时，通过将不透明度设置为零来隐藏浮动标头，避免使用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);
});

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

2 个答案: