基于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">
var t=document.documentElement.scrollTop||document.body.scrollTop;
var ElementById("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代码：
js控制滚动条<body>
<div id="div1">
</div>
</body>
css代码：
#div1{
height:150px;
width:100px;
background:red;
position:absolute;
right:0px;
bottom:0px;
}
body{
height:2000px;
}
javascript代码
//当窗体滚动的时候滴呀
var ElementById("div1");
//考虑到浏览器的兼容性滴呀(被卷去的⾼度)
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//浏览器可视区域的⾼度+物体⾃⾝的⾼度+被卷曲的⾼度
// p=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 ElementById("div1");
Timer=setInterval(function (){ //距离上⾯物体的距离滴呀
var speed=(iTarget-obj.offsetTop)/4;
speed=speed>il(speed):Math.floor(speed);
//先获取我们的速度滴呀
if(obj.offsetTop==iTarget){
clearInterval(timer); //到达⽬的之后，我们就清除元素滴呀
}else{
p=obj.offsetTop+speed+'px';
}
},30)
//来进⾏我们饿缓冲运动滴呀
}
到此这篇关于基于JS实现页⾯悬浮框的实例代码的⽂章就介绍到这了，更多相关js页⾯悬浮框内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。