制作固定的 Gridview 标题以忽略浏览器滚动条 JQuery答案

【问题标题】：Make Fixed Gridview Header to ignore browser Scroll-bar JQuery制作固定的 Gridview 标题以忽略浏览器滚动条 JQuery
【发布时间】：2015-08-08 04:09:26
【问题描述】：

有没有办法让固定标题只响应 JQuery 中的一个滚动条？在这种情况下只响应 div 滚动条而不响应浏览器滚动条。还是有不同的解决方案。我尝试摆脱浏览器滚动条，但随后所有的 gridview 都无法访问。

背景：我有一个 JQuery 克隆的 gridview 标题，它位于带有滚动条的 div 内，这是代码：

    function fixedHeader() {
        // Code to copy the gridview header with style
        var gridHeader = $('#<%=GridView1.ClientID%>').clone(true).attr('id','clonedGrid'); 
        //Code to remove all rows except the header row
        $(gridHeader).find("tr:gt(0)").remove();
        $('#<%=GridView1.ClientID%> tr th').each(function (i) {
            // Here Set Width of each th from gridview to new table th 
            $("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
        });
        // Append Header to the div controlHead
        $("#controlHead").append(gridHeader);
        // Set its position to be fixed
        $('#controlHead').css('position', 'fixed');
        // Put it on top
        $('#controlHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
    }

当窗口最大化时它工作得很好但是当我重新调整浏览器的大小并且浏览器滚动条出现时，标题将服从两个滚动条（一个来自 div 和一个来自浏览器）使标题当我使用浏览器滚动条滚动时也会移动，从而使固定标题像您在下面看到的那样关闭！]1。

【问题讨论】：

标签： javascript jquery html css gridview

【解决方案1】：

所以我修改了我的 JQuery 代码以将其更改为绝对值，并添加一个 z 索引，同时将网格中每个 th 的高度设置到新的克隆表中这就是代码的样子和 100% 的工作原理

    function fixedHeader() {
        // Code to copy the gridview header with style
        var gridHeader = $('#<%=GridView1.ClientID%>').clone(true).attr('id','clonedGrid'); 
        //Code to remove all rows except the header row
        $(gridHeader).find("tr:gt(0)").remove();
        $('#<%=GridView1.ClientID%> tr th').each(function (i) {
            // Here Set Width of each th from gridview to new table th 
            $("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
            // Here Set height of each th from gridview to new table th 
            $("th:nth-child(" + (i + 1) + ")", gridHeader).css('height', ($(this).height()).toString() + "px");
        });
        // Append Header to the div controlHead
        $("#controlHead").append(gridHeader);
        // Set its position to be fixed
        $('#controlHead').css('position', 'absolute');
        // Bring the header in front of everything else
        $('#controlHead').css('z-index', '200');
        // Put it on top
        $('#controlHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
    }

【讨论】：