| 当滚动条下拉时,悬浮框位置不变,主要是 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实现右侧悬浮框 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; //浏览器可视区域的高度+物体自身的高度+被卷曲的高度 // obj.style.top=document.documentElement.clientHeight-obj.offsetHeight+scrollTop+'px'; //var targetLen=document.documentElement.clientHeight-obj.offsetHeight+scrollTop; //move(targetLen); //这样我们就完成了基本的人物我滴 //方式二：结果他是要抖动滴呀 //var targetLen=(document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop; //move(targetLen); var targetLen=parseInt((document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop); move(targetLen); //这样我们的基本功能算是实现了滴呀 } //这里我们俩加上一个缓冲运动滴呀，这样才方便我们去这些事情滴呀 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) //来进行我们饿缓冲运动滴呀 }到此这篇关于基于JS实现页面悬浮框的实例代码的文章就介绍到这了,更多相关js页面悬浮框内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
JS一维数组转化为三维数组的实现示例
vue+elementui+vuex+sessionStorage实现历史标签菜单的示例代码 |
