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> ...

随机推荐

Spark运行模式与Standalone模式部署
上节中简单的介绍了Spark的一些概念还有Spark生态圈的一些情况,这里主要是介绍Spark运行模式与Spark Standalone模式的部署: Spark运行模式在Spark中存在着多种运行模 ...
如何通过JS调用某段SQL语句
如何通过JS调用某段SQL语句,这样的需求在报表.数据平台开发中很常见.以报表平台FineReport开发为例,例如在点击某个按钮之后,来判断一下数据库条数,再决定下一步操作.那这在后台如何实现呢? ...
POJ 1753. Flip Game 枚举or爆搜+位压缩，或者高斯消元法
Flip Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 37427 Accepted: 16288 Descr ...
POJ_2386 Lake Counting （dfs 错了一个负号找了一上午）
来之不易的2017第一发ac http://poj.org/problem?id=2386 Lake Counting Time Limit: 1000MS Memory Limit: 65536 ...
[收集]MVC3 HTML辅助方法集录
1.跳转链接 @Html.ActionLink("linkText","actionName",routeValues,htmlAttributes) e.g& ...
polya/burnside 学习
参考链接: http://www.cnblogs.com/hankers/archive/2012/08/03/2622231.html http://blog.csdn.net/raalghul/a ...
Linux 共享内存详解一
共享内存段被多个进程附加的时候,如果不是所有进程都已经调用shmdt,那么删除该共享内存段时,会出现一个临时的不完整的共享内存段(key值是0),无法彻底删除.只有当所有进程都调用shmdt,这个临时 ...
IDEA 中生成 Hibernate 逆向工程实践
谈起 Hibernate 应该得知道 Gavin King 大叔,他构建了 Hibernate ,并将其捐献给了开源社区. Hibernate 对象关系映射解决方案,为面向对象的领域模型到传统的关系型 ...
SQLite源程序分析之回叫机制
1.SQL访问数据库非常方便,只需简单的三个函数: sqlite3_open(char* szDbFileName, sqlite3 ** db) sqlite3_exec(sqlite3 *db, ...
2-SAT
n个布尔变量,满足m个如 A为x或B为y的限制建一个点拆成两个,分别表示选TRUE或FALSE 建立A的!x B的y 的连边与 A的x B的!y 的连边每次dfs. 若一个点在之前条件下无论 ...

js div及table首行顶部吸附示例

js div及table首行顶部吸附示例的更多相关文章

随机推荐

热门专题