基于JS實現(xiàn)頁面懸浮框的實例代碼
當滾動條下拉時,懸浮框位置不變,主要是 position:fixed;
樣式的作用.
當下拉到一定程度,接近footer時,我用js控制div消失,往上拉滾動條時又顯示.
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .div1 { height:2000px; } .div2 { width:100%; height:35px; background-color:#3399FF; margin-top:100px; } .div2_1{ position:fixed; width:100%; height:35px; z-index:999; background-color:#3399FF; top:0px; _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop)); } .div2_2 { display:none; } </style> <script type="text/javascript"> window.onscroll=function(){ var t=document.documentElement.scrollTop||document.body.scrollTop; var div2=document.getElementById("div2"); if(t>= 100){ div2.className = "div2_1"; }else{ div2.className = "div2"; } } </script> </head> <body> <div class="div1"> <div id="div2" class="div2"></div> </div> </body> </html>
補充:JavaScript實現(xiàn)右側(cè)懸浮框
HTML代碼:
<body> <div id="div1"> </div> </body>
css代碼:
#div1{ height:150px; width:100px; background:red; position:absolute; right:0px; bottom:0px; } body{ height:2000px; }
javascript代碼
//當窗體滾動的時候滴呀 window.onscroll=function (){ var obj=document.getElementById("div1"); //考慮到瀏覽器的兼容性滴呀(被卷去的高度) var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; //瀏覽器可視區(qū)域的高度+物體自身的高度+被卷曲的高度 // obj.style.top=document.documentElement.clientHeight-obj.offsetHeight+scrollTop+'px'; //var targetLen=document.documentElement.clientHeight-obj.offsetHeight+scrollTop; //move(targetLen); //這樣我們就完成了基本的人物我滴 //方式二:結(jié)果他是要抖動滴呀 //var targetLen=(document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop; //move(targetLen); var targetLen=parseInt((document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop); move(targetLen); //這樣我們的基本功能算是實現(xiàn)了滴呀 } //這里我們倆加上一個緩沖運動滴呀,這樣才方便我們?nèi)ミ@些事情滴呀 var Timer=null; function move(iTarget){ clearInterval(Timer);//先清除 var obj=document.getElementById("div1"); Timer=setInterval(function (){ //距離上面物體的距離滴呀 var speed=(iTarget-obj.offsetTop)/4; speed=speed>0?Math.ceil(speed):Math.floor(speed); //先獲取我們的速度滴呀 if(obj.offsetTop==iTarget){ clearInterval(timer); //到達目的之后,我們就清除元素滴呀 }else{ obj.style.top=obj.offsetTop+speed+'px'; } },30) //來進行我們餓緩沖運動滴呀 }
到此這篇關(guān)于基于JS實現(xiàn)頁面懸浮框的實例代碼的文章就介紹到這了,更多相關(guān)js頁面懸浮框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript數(shù)據(jù)結(jié)構(gòu)之數(shù)組的表示方法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之數(shù)組的表示方法,從數(shù)據(jù)結(jié)構(gòu)線性表的角度分析了數(shù)組的原理并結(jié)合實例形式分析了javascript數(shù)組的定義與使用方法,需要的朋友可以參考下2017-04-04Javascript中for循環(huán)語句的幾種寫法總結(jié)對比
如果您希望一遍又一遍地運行相同的代碼,并且每次的值都不同,那么使用循環(huán)是很方便的,javascript中for循環(huán)也是非常常用的,下面這篇文章主要介紹了Javascript中for循環(huán)的幾種寫法,需要的朋友可以參考借鑒,一起來看看吧。2017-01-01JavaScript數(shù)組對象實現(xiàn)增加一個返回隨機元素的方法
這篇文章主要介紹了JavaScript數(shù)組對象實現(xiàn)增加一個返回隨機元素的方法,涉及javascript針對數(shù)組及隨機數(shù)的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07