帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索：
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置：
首页
»
精选常用代码
» Table实现下滑表头悬浮在页面顶部效果
Table实现下滑表头悬浮在页面顶部效果
浏览：1144次
-
评论：1次
-
发布时间：2020-02-27
Html
Css
Js
导航栏
标题一
标题二
标题三
标题四
标题五
内容一
内容二
内容三
内容四
内容五
内容一
内容二
内容三
内容四
内容五
内容一
内容二
内容三
内容四
内容五
内容一
内容二
内容三
内容四
内容五
内容一
内容二
内容三
内容四
内容五
内容一
内容二
内容三
内容四
内容五
内容一
内容二
内容三
内容四
内容五
内容一
内容二
内容三
内容四
内容五
内容一
内容二
内容三
内容四
内容五
th { background:green } th,td { line-height:200px; border:1px solid #eee; width:200px; } .table { word-break:break-all; word-wrap:break-word }
var tableHd = $("#header_table"); var tableTop = tableHd.offset().top; $(window).scroll(function() { var _t = $(window).scrollTop(); if (_t - tableTop >= 0) { //table-header 已经到窗口顶部了 tableHd.css({ "position": "fixed" }) } else { tableHd.css({ "position": "static" }) } }); autoWidth(); function autoWidth() { var body_first_tr = $('#body_table').width(); $('#header_table').width(body_first_tr); for (var i = 0; i < 5; i++) { var header_id = '#body_table tbody tr:eq(0) td:eq(' + i + ')'; var body_id = '#header_table thead tr:eq(0) th:eq(' + i + ')'; var body_first_tr = $(header_id).width(); $(body_id).width(body_first_tr); } //console.log(body_first_tr); } $(window).resize(function() { //当浏览器大小变化时 autoWidth(); });
↑上面代码改变，会自动显示代码结果
jQuery调用版本：
2.1.4
<!doctype html><html><head><meta charset="utf-8"><title>Table实现下滑表头悬浮在页面顶部效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！
充值积分
充值会员
更多说明»
代码描述：table实现下滑表头悬浮在页面顶部效果
将table分为两个表,表头部分和内容部分,
通过jquery实时控制上下两表的th,td宽度统一,
在表头部分触顶时改变定位方式使它悬浮
纯CSS收藏、关注图标动画
jQuery图片放大镜效果
讨论这个常用代码（1）
回答他人问题或分享心得会奖励牛币
Lv2 入门
wx***68
2020年03月02日
可以 这个效果现在用的比较普遍了，用的是原生JS来实现的，点赞
回复
文明上网，理性发言！ 😉 阿里云幸运券，
戳我领取
发表评论
提交回复
我的积分余额：
0
已下载次数：
1144
所需牛币：
5
开始下载
牛币获取：
签到、评论、充值
» 在线充值
（10牛币=1元）
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值
鄂公网安备 42090202000075号 - 鄂ICP备2021002952号-1
微博登录
QQ登录
微信扫码登录