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

来源:https://www.sucaihuo.com/js/666.html 2016-01-11 20:18浏览(2881) 收藏

本文演示了表格头部随滚动条静止浮动的效果。代码很简单,只要引入jquery.freezeheader.js,并且对指定表格调用freezeHeader方法即可。滚动条拉到底部就可以看到thead悬浮,拉到顶部thead恢复到初始状态。
jquery.freezeheader.js表格thead随滚动条滚动
分类:表单代码 > 表格 难易:中级
查看演示 下载资源 下载积分: 20 积分

演示一:固定表格高度

<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.sucaihuo.com/js/405.html' target='_blank'>
                    css制作上下左右箭头
                </a>
            </td>
            <td>
                我们切页面经常会碰到箭头的图标,今天就分享下如何用css制作上下左右箭头。素材火的首页菜单切换按钮的箭头,正是用的这种方法,兼容IE6+及其他浏览器。
            </td>
        </tr>
        <tr>
            <td>
                2
            </td>
            <td>
                <a href='http://www.sucaihuo.com/js/406.html' target='_blank'>
                    ShearPhoto免费的集成头像插件
                </a>
            </td>
            <td>
                ShearPhoto是一款免费开源的头像上传插件,兼容目前所有浏览器,纯原生JS和PHP编写。
            </td>
        </tr>
    </tbody>
</table>
$("#table1").freezeHeader({'height': '300px'});

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

$("#table2").freezeHeader();
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2