jQuery滑动表头

Question

我的 ASP.Net 应用程序从代码隐藏生成一个<asp:Table>。我需要的是该表格的标题行在用户滚动过去时向下滑动页面。

我使用 JavaScript 尝试了以下方法：

window.onscroll = function () {

    //grab the current scroll position
    var scrollY = document.body.scrollTop;
    if (scrollY == 0) {
        if (window.pageYOffset)
            scrollY = window.pageYOffset;
        else
            scrollY = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
    }

    //grab the position of the header row I want to slide
    var head = $("tr[name='headerrow']").offset();
    var headtop = head.top;
    var headleft = head.left;

    //if the user has scrolled past the top of the header row
    if (scrollY > headtop) {

        //code correctly reaches this point as alerts show
        //alert('got here');

        //position the header row to the same as the scroll position 
        $("tr[name='headerrow']").offset({ top: scrollY, left: headleft });
    }
}

我无法移动该行。在各种浏览器开发者工具上看不到错误消息。

任何帮助将不胜感激。

编辑：我尝试在该行的子项（即所有<th> 元素）上调用offset() 函数，如下所示：

$("tr[name='headerrow']").children().offset({ top: scrollY, left: headleft });

现在可以了，但是当然，它们都被推到了左边，因为我正在使用标题行本身的 left 值...我会根据我的进度保持更新，但与此同时一如既往地感谢任何帮助。

Answer 1

解决方案：

在表格行上使用children() 方法允许您更改每个<th> 元素的偏移量。 left 值可以从 offset() 方法中省略，即

$("tr[name='headerrow']").children().offset({ top: scrollY });

Answer 2

您不能将偏移量设置为任何元素。您应该使用 css 方法并设置 top 和 left 参数。