javascript - 如何将 td 文本与单元格可见部分的顶部对齐？

Question

我的表由两列组成：对象名称和对象名称。名字只是一个词。对象可以占据多个屏幕。我想在其单元格的可见部分顶部保留名称。在这种情况下，当用户向下滚动页面时，他可以看到对象的名称，直到对象被隐藏。我怎样才能做到这一点？有插件可以这样做吗？

Answer 1

它只是几行 jQuery。http://jsfiddle.net/VuRvs/ 将处理程序附加到窗口滚动事件，找到您的“粘性”标题，根据当前滚动位置定位它们，确保它们保持在其父元素（TD）内。

$(window).on("scroll", function() {
    var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    $(".sticky").each(function() {
        var elm = $(this);
        var td = elm.parent("td");
        var tdTop = td.offset().top;
        var tdBot = tdTop + td.height() - elm.outerHeight();
        if(y <= tdBot && y >= tdTop) {
            // set a placeholder
            if(td.children().length == 1)
                td.append(elm.clone().removeClass("sticky").css("visibility", "hidden"));
            elm.css("position", "absolute");
            elm.css("top", y + "px");
        }
    });
});

Answer 2

你所描述的是一个持久的标题，或者像 Excel 这样的冻结窗格。

检查这个链接，它很好地解释了。