js div顶部吸附示例,例如这样:
以下为DIV顶部吸附示例:(此示例来自于网络,在此记录与分享!感谢原作者!)
示例1:兼容IE6
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<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样式)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<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> |
技术贴,顶!