js div顶部吸附示例，例如这样：
以下为DIV顶部吸附示例：（此示例来自于网络，在此记录与分享！感谢原作者！）
示例1：兼容IE6
<div style="height:300px;background:#e0e0e0"></div> <div id="fixedMenu" style="background:#ffffff;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>