注冊了個博客，發了兩篇博文后不知道發啥了，最近看其他網友發了篇關於固定div位置的博文，我也來show一下我的作法，代碼在下面，沒有做過多的封裝，僅僅提供思路，供參考，歡迎大家噴水~~
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <title>Js跟隨滾動條移動的DIV</title> </head> <style type="text/css"> *{margin:0;padding: 0;background-color:#000; } div#con{width: 800px;margin: 0 auto;} div.pop{width:800px;font-size: 18px;background:yellow;padding:20px 0;margin:20px auto;border:1px solid yellow;text-align: center;color: #000;} p{width:800px;padding:20px 0;background:#fff;border:1px solid #000;margin:20px auto;text-align: center;} div.active{position: fixed;top: 100px;z-index: 100;margin: 0;_position: absolute;} </style> <body> <div id="con" style="height:2000px;"> <p>我是元素p</p> <div id="myDiv" class="pop active"> 我是隨屏幕滾動的DIV，我距離頂部高度適中為100px，修改css就可以修改該值 </div> <p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p style="color:red;position:fixed;top:400px;">我是元素top:400px;看是否支持固定定位</p> </div> <script type="text/javascript"> (function(){ //if(navigator.userAgent.toLocaleLowerCase().indexOf('msie 6.0;')>1){ if(checkFixed()){ return ; }//只需對不支持固定定位的瀏覽器做處理 //將下面需要使用的dom相關操作在scrollDiv外面提取一次，避免多次dom操作 var fixedObj = document.getElementById("myDiv"), height = fixedObj.offsetHeight,//標簽高度提前讀取出來 firstTop =getTop(fixedObj),//記錄頁面一開始標簽所在位置 timer; window.onscroll = function(){//這里做個延時執行，可以減少scroll執行頻率 clearTimeout(timer); timer = setTimeout(function(){ scrollDiv() },30); } function scrollDiv(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; fixedObj.style.top=(firstTop+scrollTop)+'px'; } //獲取元素在頁面里top值 function getTop(obj) { var top = 0; while(obj){ top += obj.offsetTop; obj = obj.offsetParent; } return top; } //判斷瀏覽器是否支持固定定位 function checkFixed(){ var o = document.createElement('div'), body = document.getElementsByTagName('body')[0], fig = false; body.insertBefore( o, body.firstChild ); o.style.cssText ='position:fixed;top:20px;margin:0;padding:0;border:none;width:0px;height:0px;'; fig = o.offsetTop==20; body.removeChild(o); return fig; } })() </script> </body> </html>