本文介绍利用JavaScript和CSS实现页面悬浮框的技术。通过position:fixed保持悬浮框位置，结合滚动事件监听，当接近页脚时控制悬浮框显示与隐藏。包含HTML结构、CSS样式及JS逻辑的完整示例，适用于右侧悬浮广告或快捷导航场景。
悬浮框基础实现与滚动交互逻辑
当页面滚动条下拉时，悬浮框位置保持不变，这主要依赖于 position:fixed;样式属性的作用。
当滚动条下拉至特定程度，即接近页脚区域时，通过JavaScript控制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、CSS与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页面悬浮框内容，请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！