jquery.freezeheader.js表格thead随滚动条滚动

收藏

本文演示了表格头部随滚动条静止浮动的效果。代码很简单，只要引入jquery.freezeheader.js，并且对指定表格调用freezeHeader方法即可。滚动条拉到底部就可以看到thead悬浮，拉到顶部thead恢复到初始状态。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

演示一：固定表格高度

<table class="gridView" id="table1">
    <thead>
        <tr>
            <th>id</th>
            <th>标题</th>
            <th>描述</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                <a href='http://www.erdangjiade.com/js/405.html' target='_blank'>
                    css制作上下左右箭头
                </a>
            </td>
            <td>
                我们切页面经常会碰到箭头的图标，今天就分享下如何用css制作上下左右箭头。素材火的首页菜单切换按钮的箭头，正是用的这种方法，兼容IE6+及其他浏览器。
            </td>
        </tr>
        <tr>
            <td>
                2
            </td>
            <td>
                <a href='http://www.erdangjiade.com/js/406.html' target='_blank'>
                    ShearPhoto免费的集成头像插件
                </a>
            </td>
            <td>
                ShearPhoto是一款免费开源的头像上传插件，兼容目前所有浏览器，纯原生JS和PHP编写。
            </td>
        </tr>
    </tbody>
</table>

$("#table1").freezeHeader({'height': '300px'});

演示一：表格头thead随滚动条滚动

$("#table2").freezeHeader();