滚动悬停 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用jquery滚动到导航条时固定(fixed)在顶部</title> </head> <body style="padding:0;margin:0;"> <div style="height:500px;background:#999"></div> <div id="fixedMenu" style="background:#c98;width:100%;height:50px;">菜单</div> <div style="height:1300px;background:#999"></div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { var ie6 = /msie 6/i.test(navigator.userAgent) , 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> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 利用jquery滚动到导航条时固定(fixed)在顶部 喜欢 (0)or分享 (0)
