基于JS实现页面悬浮框的实例代码
作者：miaoying
这篇文章主要介绍了基于JS实现页面悬浮框的实例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
当滚动条下拉时,悬浮框位置不变,主要是 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页面悬浮框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！