jquery - 使用 scrollTop/scrollLeft - Angular 单元格卡住标题/列

Question

我已经阅读了很多卡住列/标题的问题，但没有发现任何与我的问题类似的问题。这个问题得到了最好的证明:http://jsfiddle.net/5TYcb/4/

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

这个简单的滚动代码的其他一切都很好，如果我能弄清楚如何处理那个 Angular 单元格就好了。

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>

注意:我们已经尝试了各种固定的标题插件，但它们的麻烦比它们的值(value)要多。我们有动态列、表格上方的动态元素等。我们希望坚持使用这个简单的代码，它可以轻松应用于我们网站上的任何列表。

感谢您的帮助!

Answer 1

为第 1 列制作 css

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

fiddle http://jsfiddle.net/5TYcb/6/