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

随机推荐

TCP连接建立和终止小结
TCP连接建立(三次握手) 如图: 请求端发送一个SYN到服务器的相应端口,以及初始序号ISN 服务器发送包含服务器的初始序号的SYN作为应答,同时确认序号设置为客户的ISN+1 客户将确认序号设置为 ...
Vim Using
1 2 set nu 3 set backup 4 set bg=light 5 " transform tab to space 6 set expandtab 7 " auto ...
Java GC系列
一个国外站点的Java JVM调优系列下面是国内站点翻译的 http://www.importnew.com/1993.html
TypeScript 素描 - 类
本文虽然是学自官方教程而来,但是也融入了自己的理解,而且对官方的例子做了一些修改 /* 类面向对象编程的一大核心使用C#.Java进行编程的朋友肯定已经是不能够再熟悉了 TypeScript的类与 ...
[LeetCode] Reverse Linked List II 倒置链表之二
Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1-> ...
做中学（Learning by Doing）之背单词-扇贝网推荐
做中学(Learning by Doing)之背单词-扇贝网推荐看完杨贵福老师(博客,知乎专栏,豆瓣)的「继续背单词,8个月过去了」,我就有写这篇文章的冲动了,杨老师说: 有时候我会感觉非常后悔,如 ...
Docker对于部署来说及其重要
目前的IT环境发生了很大的变化,有big server到vm server到docker,一步步的敏捷快速,更加合理的利用硬件资源,分离不同环境带来的问题,简化部署. 2016过年的这几天就自学了一下 ...
C# mysql 获取所有表名
public static List<string> GetAllTableName() { List<string> retNameLis ...
vi学习总结
1.模式命令行模式:光标的移动.内容删除移动复制操作插入模式:文字输入,即编辑状态底行模式:文件保存或退出vi,设置编辑环境 2.基本操作 vi myfile,输入vi 文件名,,则进入vi. ...
xv6课本翻译之——第0章操作系统接口
Chapter 0 第0章 Operating system interfaces 操作系统接口 The job of an operating system is to share a comput ...

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

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

随机推荐

热门专题