固定table第一列

最新推荐文章于 2024-07-31 02:32:41 发布

下一个转角124

最新推荐文章于 2024-07-31 02:32:41 发布

阅读量1.2w

点赞数 1

文章标签： js 固定表头

本文链接：https://blog.csdn.net/qq_27771459/article/details/53905538

版权

表格:为外层div绑定scroll事件

       <div id="freezing" style="overflow:scroll" οnscrοll="javascript:freezing()">
            <table id="timetable">
                <thead>
                <tr id="tablehead">
                    <th></th>
                </tr>
                </thead>
                <tbody id="tablebody">

                </tbody>
            </table>
        </div>

css：设置tr的第一个子元素为相对定位

tr>:first-child{
    width : 66px;
    position : relative;
    border : solid #A4D3EE 1px;
}

js:

//固定表格首列
function freezing(){
    $("tr>:first-child").css("left",$("#freezing").scrollLeft()-1);
    var thWidth=$("#tablehead>:first").width();
    var step=thWidth/5;//分5次过渡，每step像素过渡一次
    var scroLeft=$("#freezing").scrollLeft(); //向左滚动的距离
    var tol=Math.ceil(scroLeft/step);
    if(scroLeft==0){
        $("tr>:first-child").removeClass("isScrolling").css("opacity",1);
    }else if(scroLeft>0&&scroLeft<thWidth){
        $("tr>:first-child").addClass("isScrolling").css("opacity",0.2*tol);
    }else{
        $("tr>:first-child").addClass("isScrolling").css("opacity",1);
    }
}