头部固定悬浮table表头(thead)的方法 (实用、赞）

本文介绍了如何使用jQuery监听页面滚动事件，当表头滚动到页面顶部时，创建并悬浮一个复制的表头，实现实时响应的滚动导航效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文出处：https://www.cnblogs.com/circleline/p/7698249.html （思路见原文）

大概思路：
对页面滚动事件进行监听，当页面向上滚动，表头滚出页面时，显示一个复制出来的表头。效果如下：

代码如下:（注意：原文部分代码无效果，所以这里做了些调整）

<!-- 来源： https://www.cnblogs.com/circleline/p/7698249.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>表格顶部悬浮效果</title>
    <!--  <script src="jquery-latest.js"></script> -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>
        .container {
            width: 980px;
            margin: 0 auto;
        }

        .top {
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 2.0rem;
        }

        body {
            border: 1px solid red;
        }

        .table {
            margin-top: 50px;
            border: 1px solid blue;
        }

            .table thead {
                height: 50px;
            }

            .table tr td,
            .table tr th {
                padding: 20px;
                text-align: center;
            }
    </style>
</head>
<body>
    <div class="top">表头悬浮效果</div>
    <table id="scroll_bar" class="table container" border="1">
        <thead>
            <tr id="bar_head">
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th>表头4</th>
                <th>表头5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>4</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>4</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>4</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>4</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>4</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>4</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>4</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>4</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>4</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>4</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>4</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>4</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>4</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>

    <script>
        $(function () {
            var scroll_bar = $("#scroll_bar");//表格的id
            var bar_head = $("#bar_head");//表头
            var bar_height = bar_head.height();//表头高
            var sroll_header = scroll_bar.clone().attr('id', 'bb');//更改复制的表格id
            $(window).scroll(function () {
                //var scroll_top = $('body').scrollTop() - scroll_bar.offset().top; //判断是否到达窗口顶部
                var scroll_top = document.documentElement.scrollTop - scroll_bar.offset().top;  //判断是否到达窗口顶部

                if (scroll_top > 0) {
                    $('body').append('<div id="shelter"></div>');//复制的表格所在的容器
                    $("#shelter").css({ 'height': bar_height, 'position': 'fixed', 'top': '0', 'overflow': 'hidden', 'width': '980px', 'margin': '0 auto', 'left': '0', 'right': '0', 'border-bottom': '1px solid #c8c8c8' });
                    sroll_header.appendTo('#shelter');
                    $('#shelter table').removeClass(); //删除table原来有的默认class，防止margin,padding等值影响样式
                    $('#shelter table').css({ 'width': '980px', 'background-color': '#f0f0f0', 'margin': '0 auto' });
                    $('#shelter table tr th').css('height', bar_height);//此处可以自行发挥
                    $('#shelter table tr td').css({ 'padding': '20px', 'text-align': 'center' });

                    $('#shelter').show();			// 显示复制出来的表头

                } else {
                    $('#shelter').hide();			// 隐藏复制出来的表头
                }
            });
        });

    </script>
</body>
</html>