Question

我已经阅读了很多冻结列/标题问题，但没有找到类似我的问题。最好地证明了这个问题：http://jsfiddle.net/5TYcb/4/

我的问题是左上角的单元格“Col 1”。如果我向上滚动，该列中的数据将涵盖Col 1标题。我们希望数据在标题下，而不是在其上，就像所有其他标题单元格一样。如果我向左滚动，则Col 1标题消失，我希望它随列移动。

关于这个简单的滚动代码的其他所有内容都很有效，只要我能弄清楚如何处理该角落单元格。

JS：

$(document).ready(function(){
//This code freezes the headers of the table called requestList
$(document).scroll(function () {
    if ($('#requestList').size() > 0) {
        var delta = $(window).scrollTop() - $("#requestList thead.top tr:last").offset().top;
        window.console && console.log('delta: ' + delta);
        if (delta > 0) {
            translate($("#requestList thead.top tr:last th"), 0, delta);
        } else {
            translate($("#requestList thead.top tr:last th"), 0, 0);
        };
    };

    if ($('#requestList').size() > 0) {
        var delta = $(window).scrollLeft() - $("#requestList td:nth-child(1),#HeaderRow th:nth-child(1)").offset().left;

        if (delta > 0) {
            translate($("#requestList td:nth-child(1)"), delta, 0);
        } else {
            translate($("#requestList td:nth-child(1)"), 0, 0);
        };
    };
});


function translate(element, x, y) {
    var translation = "translate(" + x + "px," + y + "px)"

        element.css({
            "transform": translation,
            "-ms-transform": translation,
            "-webkit-transform": translation,
            "-o-transform": translation,
            "-moz-transform": translation,
        });

    }

});

HTML：

<table id="requestList" class="highlighter dataTable" width="100%" style="width: 100%;" cellspacing="0" cellpadding="2">
    <thead class="top">
        <tr role="row">
            <th colspan="14" style="background:#FFFFCC;color:black;text-align:left;">Legend: ....</th>
        </tr>
        <tr id="HeaderRow" role="row">
            <th>Col 1</th>
            <th>Col 2</th>
            ....
            <th>Col 13</th>
            <th>Col 14</th>
        </tr>
    </thead>
    <tbody id="tableBodyDiv" class="reqList" role="alert" aria-live="polite" aria-relevant="all">
        <tr>
            <td class="">Data 1</td>
            <td class="">Data 2</td>
            ....
            <td class="">Data 13</td>
            <td class="">Data 14</td>
        </tr>
        <tr>
            <td class="">Data 1</td>
            <td class="">Data 2</td>
             ...
            <td class="">Data 13</td>
            <td class="">Data 14</td>
        </tr>
        ....
    </tbody>
</table>

注意：我们尝试了各种固定的插件插件，但它们更值得一试。我们有动态列，此表上方的动态元素等。我们希望坚持使用这个简单的代码，它可以轻松应用于我们网站上的任何列表。

感谢您的帮助！

Answer 1

为col1制作css，如

thead th:first-child{
    position:relative;
    z-index:10;
}

小提琴http://jsfiddle.net/5TYcb/6/

使用scrollTop / scrollLeft冻结标题/列 - 角单元格

1 个答案: