js div及table首行顶部吸附示例
js div顶部吸附示例，例如这样：
以下为DIV顶部吸附示例：（此示例来自于网络，在此记录与分享！感谢原作者！）
示例1：兼容IE6
<div style="height:300px;background:#e0e0e0"></div>
<div id="fixedMenu" style="background:#ffffff;width:100%;">
<ul>
<li><a href="http://www.keleyi.com/menu/net/" target="_blank">导航栏</a></li>
</ul>
</div>
<div style="height:2600px;background:#999"></div>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
var ie6 = document.all;
var dv = $('#fixedMenu'), st;
dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
$(window).scroll(function () {
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
if (st > parseInt(dv.attr('otop'))) {
if (ie6) {//IE6不支持fixed属性，所以只能靠设置position为absolute和top实现此效果
dv.css({ position: 'absolute', top: st });
}
else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
});
});
</script>
示例2：不能很好兼容IE6
<html>
<head>
<title>位置固定(</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(".nav").offset().top;
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0});
}else if(scroH<navH){
$(".nav").css({"position":"static"});
}
})
})
</script>
</head>
<body>
<div class="top">top</div>
<p> </p>
<hr>
<div class="nav">topnav</div> <div style="height:888px;"></div>
</body>
</html>
Table首行tr顶部吸附示例，通过示例1 DIY自行修改而来：
效果如下：
代码如下：（代码未包含上图CSS样式）
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script> <script type="text/javascript">
$(document).ready(function(e) {
//预加载固定方法
adsorption_top();
/*当窗口大小调整时也执行顶部固定修复*/
$(window).resize(function(){
var ie6 = document.all;
var dv = $('#fixedMenu'),st,tr_kd;
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
if (st > parseInt(dv.attr('otop'))) {
if($(document).width()<755){tr_kd=$("#cankao").width();}
else{tr_kd=$("#cankao").width()+1;}
dv.css({ 'position': 'fixed', top: 0 ,'width':tr_kd});
}
});
}); function adsorption_top(){
var ie6 = document.all;
var dv = $('#fixedMenu'), st,tr_kd;
dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
$(window).scroll(function () {
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
//检查GoogleChrome，如果是则宽度+1,修复不对齐问题，否则设置与下面的tr宽度一致
if(isChrome){tr_kd=$("#cankao").width()+1;}
else{tr_kd=$("#cankao").width();}
if (st > parseInt(dv.attr('otop'))) {
if (ie6) {//IE6不支持fixed属性，所以只能靠设置position为absolute和top实现此效果
dv.css({ position: 'absolute', top: st });
}
else if (dv.css('position') != 'fixed');dv.css({ 'position': 'fixed', top: 0 ,'width':tr_kd});
} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
});
};
</script>
<style>
td,th{text-align:center;background:#fff;}
</style>
<table border="1px" style="border-collapse:collapse;">
<tr id="fixedMenu"><th width="108px">部门</th><th width="108px">姓名</th><th width="108px">假期类别</th><th width="108px">开始日期</th><th width="108px">结束日期</th><th width="109px">状态</th><th width="109px">操作</th></tr>
<tr id="cankao"><td width="108px">1</td><td width="108px">2</td><td width="108px"> 3</td><td width="108px">4</td><td width="108px">5</td><td width="109px">6</td><td width="109px">7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td> 3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
</table>
js div及table首行顶部吸附示例的更多相关文章
- table首行固定
转自http://www.cnblogs.com/azhqiang/p/3965774.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- [转] js实现html table 行，列锁定
js实现html table 表头,指定列锁定 实现效果如下: 感兴趣的朋友可以直接复制出来运行看效果. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTM ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- div+CSS实现段落首行缩进两个字符
段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...
- JS实现页面table鼠标移动改变tr行颜色，单击tr选中复选框功能
JS源代码: //需要设置tr背景颜色 var highlightcolor='#bfecfc'; //设置背景颜色 function changeto(index){ var tr1 = docum ...
- Div+Css实现段落首行缩进两个字符（text-indent标签）
段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...
- js简单固定table表头及css问题分析。
<head> <meta name="viewport" content="width=device-width" /> <tit ...
- (转)Div和Table的区别
原文:http://www.cnblogs.com/lovebear/archive/2012/04/18/2456081.html Div与table的区别 1:速度和加载方式方面的区别 div 和 ...
- 转: Div与table的区别
1:速度和加载方式方面的区别 div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的: div 的加载方式是即读即加载,遇到 <div> ...
随机推荐
- 《使用Hibernate开发租房系统》内部测试笔试题
笔试总结 1．在Hibernate中,以下关于主键生成器说法错误的是( C). A．increment可以用于类型为long.short或byte的主键 B．identity用于如SQL Server ...
- jdbc java数据库连接 7）获取插入数据的自增长值
我们创建一个sql表,里面的数据往往都会有自增长值. 那么,我们用jdbc插入数据的时候,要想同时获得这个增长值. 代码: /** * * 这是插入一条数据的同时,获取该数据的则增长列的值(该例子的自 ...
- $.ajax()方法详解
jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...
- 在ASP.NET Core中使用Angular2，以及与Angular2的Token base身份认证
注:下载本文提到的完整代码示例请访问:How to authorization Angular 2 app with asp.net core web api 在ASP.NET Core中使用Angu ...
- 系统级性能分析工具perf的介绍与使用
测试环境:Ubuntu16.04(在VMWare虚拟机使用perf top存在无法显示问题) Kernel:3.13.0-32 系统级性能优化通常包括两个阶段:性能剖析(performance pro ...
- FCM聚类算法介绍
FCM算法是一种基于划分的聚类算法,它的思想就是使得被划分到同一簇的对象之间相似度最大,而不同簇之间的相似度最小.模糊C均值算法是普通C均值算法的改进,普通C均值算法对于数据的划分是硬性的,而FCM则 ...
- eclipse环境搭建
百度经验http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html 1.JAVA JDK 2.Andriod SDK eclipse里 ...
- mybatis一对多关联
这里的一对多指的是:当我们查询一个对象的时候,同时将其有关联的多方对象都查询出来. 下面以国家(Country)和部长(Minsiter)做案例 一个国家有多个部长 1.定义实体 定义实体的时候需要注 ...
- ActiveMQ安全配置
1.activeMQ管理后台用户名.密码的设置 管理后台地址http://localhost:8161/admin 默认用户名密码admin admin 端口默认是8161,且服务采用的是服务器,所以 ...
- cocos2d-x事件EventListenerTouchOneByOne没反应
今天写了 cocos2d-x事件EventListenerTouchOneByOne,发现死活没反应,原代码复制到新工程没问题啊, 后来发现cocostudio用的基础容器(ccui.Layout:c ...