jquery简单实现滚动条下拉DIV固定在头部不动
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滚动条下拉DIV固定在头部不动</title> <script type="text/javascript" src="http://img.fishburg.net/ks/js/jquery-1.8.js"></script> <style> *{padding:0;margin:0;} .ab{ width:100%; background-color:#eee; height:250px; text-align:center; line-height:250px;} .bc{ width:100%; background-color:#eee; text-align:center; text-align:center; color:#fff; font-size:24px; background-color:#060;} .pf{ width:100%; height:50px; background-color:#C00; text-align:center; line-height:50px; color:#fff;} /*---------------------漂浮导航---------------------------*/ html{ _background-image:url(about:blank); _background-attachment:fixed;/** 防止 ie6 抖动 **/} .float{ position:fixed; z-index:999999; top:0px;} * html .float{ position:absolute; _top:expression(documentElement.scrollTop-0);} </style> </head> <body> <div class="ab">第一版块</div> <div class="pf">漂浮内容</div> <script type="text/javascript"> window.onscroll=function(){ if ($(document).scrollTop() > 250) { //$("#pf_nav").show(); $(".pf").addClass('float'); }else{ //$("#pf_nav").hide(); $(".pf").removeClass('float'); } } </script> <div class="bc"> <p> <script language="javascript"> for(i=0;i<50;i++){ document.write(i+"<br />"); } </script> </p> </div> </body> </html>
相关推荐
echoes 2019-11-03
xiaohuli 2019-06-29
libowen0 2018-06-04
dangzhangjing 2019-06-27
语帆 2015-04-15
zengni 2014-08-20
努力的zhiyi 2014-08-04
ChromeHearts 2013-05-14
沉着前进 2011-10-22
liusure0 2011-09-27
87453661 2011-08-21
wolaizheli 2011-06-30
linkincsdn 2011-05-22
hong 2011-03-03
我的梦想 2016-06-16
闷骚的男 2016-08-10
飞蛾分吧 2016-06-07
88417615 2019-04-25