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

随机推荐

js 的 protype 小总结
这里是对该文的总结: 1.Javascript中对象的prototype属性的解释是:返回对象类型原型的引用. 2.原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并 ...
WPF 自定义DateControl DateTime控件
自定义日期控件,月份选择.如下是日期的一些效果图. 具体的样式.颜色可以根据下面的代码,自己调节即可 1.日期控件的界面 <UserControl x:Class="WpfApp ...
django 一些相关问题
这两天在处理django项目时碰到一些问题 1.ur路径设置要忽略大小写,查找了很多资料,都没有发现相关的介绍,最后在谷歌上找到一个解决方案,https://groups.google.com/for ...
MongoDB 导出、导入表
var srcTbl = "20161226"; var destTbl = "20161226-bak"; 方式一: MongoClient client ...
[LeetCode] Palindrome Pairs 回文对
Given a list of unique words. Find all pairs of distinct indices (i, j) in the given list, so that t ...
[LeetCode] Peeking Iterator 顶端迭代器
Given an Iterator class interface with methods: next() and hasNext(), design and implement a Peeking ...
volley用法之以post方式发送 json 参数
需求是这样我们需要发送一个post请求向服务器要参数.要求是发送的post参数也要是json格式. 简单一点的是这样的: 如果要发送的是这样简单的json格式,我们可以简单的使用map来实现: Re ...
Java读取xml配置文件
package test.com; import java.io.FileInputStream; import javax.xml.parsers.DocumentBuilder;import ja ...
Appium简单测试用例
工程目录如下: 封装初始化androiddriver 方法 import org.openqa.selenium.remote.DesiredCapabilities; import java.io. ...
【Codeforces235C】Cyclical Quest 后缀自动机
C. Cyclical Quest time limit per test:3 seconds memory limit per test:512 megabytes input:standard i ...

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

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

随机推荐

热门专题