当滚动条下拉时,悬浮框位置不变,主要是 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页面悬浮框内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码！
