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

最新推荐文章于 2023-11-21 16:31:19 发布

转载最新推荐文章于 2023-11-21 16:31:19 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/colinliu/p/div-table-top.html

本文提供两种DIV顶部吸附的示例代码，一种兼容IE6及以上版本，另一种不完全兼容IE6。此外还提供了一个表格首行TR顶部吸附的示例，解决了不同浏览器下兼容性和显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

转载于:https://www.cnblogs.com/colinliu/p/div-table-top.html