滚动条超出表格标题,表格标题固定
2016-02-29 13:33
204 查看
css:样式
#divTitle{padding:10px;position:relative;top:0px;width:93.5%; z-index:100; background-color:#6FA1D8;}
<div id="divTitle" style=" display:none;">
<table style="width: 100%; border-collapse: collapse;">
<tr style="background-color: #6fa1d8; height: 24px;">
<td style="width:130px;">功能分类名称</td>
<td style="width:160px;">项目名称</td>
<td style="width:130px;">初始金额</td>
<td style="width:130px;">待审核金额</td>
<td style="width:90px;">可用金额</td>
<td style="width:90px;">实际发生金额</td>
<td style="width:90px;">使用百分比列</td>
</tr>
</table>
</div>
js 脚本
function menuFixed(id) {
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;
window.onscroll = function() {
changePos(id, _getHeight);
}
}
function changePos(id, height) {
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var height = $("#table_Collgrid").offset().top;
if (scrollTop+20 < height) {
obj.style.position = 'relative';
obj.style.display = "none";
} else {
obj.style.position = 'fixed';
obj.style.display = "";
}
}
window.onload = function() {
menuFixed('divTitle');
}
#divTitle{padding:10px;position:relative;top:0px;width:93.5%; z-index:100; background-color:#6FA1D8;}
<div id="divTitle" style=" display:none;">
<table style="width: 100%; border-collapse: collapse;">
<tr style="background-color: #6fa1d8; height: 24px;">
<td style="width:130px;">功能分类名称</td>
<td style="width:160px;">项目名称</td>
<td style="width:130px;">初始金额</td>
<td style="width:130px;">待审核金额</td>
<td style="width:90px;">可用金额</td>
<td style="width:90px;">实际发生金额</td>
<td style="width:90px;">使用百分比列</td>
</tr>
</table>
</div>
js 脚本
function menuFixed(id) {
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;
window.onscroll = function() {
changePos(id, _getHeight);
}
}
function changePos(id, height) {
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var height = $("#table_Collgrid").offset().top;
if (scrollTop+20 < height) {
obj.style.position = 'relative';
obj.style.display = "none";
} else {
obj.style.position = 'fixed';
obj.style.display = "";
}
}
window.onload = function() {
menuFixed('divTitle');
}
相关文章推荐
- git使用ssh密钥
- 【DSP开发技术】影响高性能DSP功耗的因素及其优化方法
- CInternetSessio和CFtpConnection连接FTP
- 备战2017软考!必备视频教程推荐(综合复习+真题解析+考前冲刺+报名整理)
- 国内UED网站大全
- 华为:一张图看懂 HBase
- ubuntu 英文系统下安装中文输入法
- 瀑布模型&敏捷开发
- (.net)ajax+json+catch缓存+js控制页面动态生成div
- python学习(2)基本语法
- leetcode 30. Substring with Concatenation of All Words
- Referenced file contains errors (file:/D:/Users/Administrator/AppData/Local/
- CoreData两个表通过属性关联
- Android 沉浸式状态栏 一体化状态栏实现
- Kinect的三维重建
- 怎样串联两台无线路由器:[1]二级路由设置
- Linux——为CentOS 7添加Windows引导程序
- nginx反向代理--upstream模块
- Android模拟器的文件目录介绍
- 搭建FTP服务器