基于JS實(shí)現(xiàn)頁面懸浮框的實(shí)例代碼
當(dāng)滾動(dòng)條下拉時(shí),懸浮框位置不變,主要是 position:fixed;
樣式的作用.
當(dāng)下拉到一定程度,接近footer時(shí),我用js控制div消失,往上拉滾動(dòng)條時(shí)又顯示.
<!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>
補(bǔ)充:JavaScript實(shí)現(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代碼
//當(dāng)窗體滾動(dòng)的時(shí)候滴呀 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é)果他是要抖動(dòng)滴呀 //var targetLen=(document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop; //move(targetLen); var targetLen=parseInt((document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop); move(targetLen); //這樣我們的基本功能算是實(shí)現(xiàn)了滴呀 } //這里我們倆加上一個(gè)緩沖運(yùn)動(dòng)滴呀,這樣才方便我們?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); //到達(dá)目的之后,我們就清除元素滴呀 }else{ obj.style.top=obj.offsetTop+speed+'px'; } },30) //來進(jìn)行我們餓緩沖運(yùn)動(dòng)滴呀 }
到此這篇關(guān)于基于JS實(shí)現(xiàn)頁面懸浮框的實(shí)例代碼的文章就介紹到這了,更多相關(guān)js頁面懸浮框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS簡(jiǎn)單實(shí)現(xiàn)獲取元素的封裝操作示例
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)獲取元素的封裝操作,結(jié)合實(shí)例形式分析了JS針對(duì)頁面ID、class、TAG元素獲取的函數(shù)與對(duì)象封裝操作實(shí)現(xiàn)方法,需要的朋友可以參考下2017-04-04Javascript?中AJAX的圖書管理代碼實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了AJAX的圖書管理代碼實(shí)例,使用數(shù)據(jù)庫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02JavaScript實(shí)現(xiàn)tab欄切換效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)tab欄切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03JavaScript數(shù)據(jù)結(jié)構(gòu)之?dāng)?shù)組的表示方法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之?dāng)?shù)組的表示方法,從數(shù)據(jù)結(jié)構(gòu)線性表的角度分析了數(shù)組的原理并結(jié)合實(shí)例形式分析了javascript數(shù)組的定義與使用方法,需要的朋友可以參考下2017-04-04Javascript中for循環(huán)語句的幾種寫法總結(jié)對(duì)比
如果您希望一遍又一遍地運(yùn)行相同的代碼,并且每次的值都不同,那么使用循環(huán)是很方便的,javascript中for循環(huán)也是非常常用的,下面這篇文章主要介紹了Javascript中for循環(huán)的幾種寫法,需要的朋友可以參考借鑒,一起來看看吧。2017-01-01JavaScript數(shù)組對(duì)象實(shí)現(xiàn)增加一個(gè)返回隨機(jī)元素的方法
這篇文章主要介紹了JavaScript數(shù)組對(duì)象實(shí)現(xiàn)增加一個(gè)返回隨機(jī)元素的方法,涉及javascript針對(duì)數(shù)組及隨機(jī)數(shù)的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07