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

随机推荐

x01.CodeBuilder: 生成代码框架
根据 Assembly 生成代码框架. 这是学习 AvalonEdit 的一个副产品.学习时,照着源代码新建文件夹,新建文件,添加方法与属性,虽然只是个框架,也要花费大量时间.为什么不让它自动生成呢? ...
java中可定制的序列化过程 writeObject与readObject
来源于:[http://bluepopopo.iteye.com/blog/486548] 什么是writeObject 和readObject?可定制的序列化过程这篇文章很直接,简单易懂.尝试着翻 ...
MySql存储过程
MySQL 存储过程 ```sql CREATE PROCEDURE myprocedure (IN para01 INTEGER) BEGIN DECLARE var01 CHAR(10); IF ...
iOS开发常用代码块（第二弹）
GCD定时器 dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, ); dispat ...
Java To CSharp源代码转换
前言开发环境客户端:Unity3D开发(C#) 服务器:Java (基于Java7) 日期:2016年09月需求说明部分服务器的部分逻辑功能在客户端实现一遍,可以简单的理解为服务器的部分 ...
[LeetCode] House Robber III 打家劫舍之三
The thief has found himself a new place for his thievery again. There is only one entrance to this a ...
[LeetCode] Anagrams 错位词
Given an array of strings, return all groups of strings that are anagrams. Note: All inputs will be ...
Codeforces Round #382(div 2)
A.= = B. 题意:给出n个数和n1和n2,从n个数中分别选出n1,n2个数来,得到n1个数和n2个数的平均值,求这两个平均值的最大和分析:排个序从后面抽,注意先从末尾抽个数小的,再抽个数大的 ...
simpson
使用二次函数拟合复杂的连续函数求积分对于(l,r)拟合的积分为(r-l)*(f(l)+4*f((l+r)/2)+f(r))/6 ___________________________ BZOJ217 ...
Python NaN
NaN, Not a Number, 非数. 它即不是无穷大, 也不是无穷小, 而是python/numpy/... 觉得无法计算时返回的一个符号(自己的推测, 未考证(TODO)). import ...

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

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

随机推荐

热门专题