Posted in Javascript onNovember 25, 2013
<!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>
jquery简单实现滚动条下拉DIV固定在头部不动
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@