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>