悬浮侧边栏（JavaScript）

最新推荐文章于 2021-08-12 11:12:57 发布

转载最新推荐文章于 2021-08-12 11:12:57 发布 · 967 阅读

本文介绍了一种使用HTML和JavaScript实现的动态悬浮侧边栏效果。通过监听滚动事件并计算视口高度与元素位置之间的相对距离，使侧边栏能够跟随页面滚动而平滑移动。适用于需要固定导航或辅助菜单的网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>悬浮侧边栏</title>
<style>
#div1{
width: 100px;
height: 150px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script>
window.onscroll=function(){
var oDiv1=document.getElementById('div1');
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

// oDiv1.style.top=document.documentElement.clientHeight-oDiv1.offsetHeight+scrollTop+'px';
// oDiv1.style.top=(document.documentElement.clientHeight-oDiv1.offsetHeight)/2+scrollTop+'px';
//

// startMove(document.documentElement.clientHeight-oDiv1.offsetHeight+scrollTop);
startMove((document.documentElement.clientHeight-oDiv1.offsetHeight)/2+scrollTop);
}
var timer=null;
function startMove(iTarget){
var oDiv1=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=(iTarget-oDiv1.offsetTop)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(oDiv1.offsetTop==iTarget){
clearInterval(timer);
}else{
var oTxt1=document.getElementById('txt1');
oTxt1.value=oDiv1.offsetTop;
oDiv1.style.top=oDiv1.offsetTop+speed+'px';
}
},30)
}
</script>
</head>
<body style="height:2000px;">
<input type="text" id="txt1" style="position: fixed; right: 0;"/>
<div id="div1">

</div>
</body>
</html>