本文介绍如何使用JavaScript实现页面侧边悬浮层跟随滚动条移动的效果。核心思路是通过监听onscroll事件获取当前滚动高度，结合缓冲运动算法计算目标位置，利用setInterval实现平滑移动，并处理整数取整以避免小数位闪烁，最终实现稳定的侧边固定跟随效果。
侧悬浮层效果与思路
效果展示
实现思路
首先，通过监听窗口的onscroll事件来捕获滚动条的状态。接着，编写一个缓冲运动函数，该函数首先计算DIV元素到达目标位置所需的移动速度，并对速度值进行取整处理，以防止因小数位导致的视觉闪烁。随后，判断元素是否已到达终点，若未到达则继续运动，并返回相关参数。最后，在onscroll事件回调中调用此缓冲运动方法，并将计算出的目标终点位置作为参数传入。
JavaScript代码实现
代码实现
具体代码如下
<head runat="server">
<title></title>
<style type="text/css">
#div1
{
width: 200px;
height: 200px;
background: #0000FF;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script type="text/javascript">
window.onscroll = function () {
var oDiv = document.getElementById('div1');
var DivScroll = document.documentElement.scrollTop || document.body.scrollTop; //获取移动高度
// oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll)); //调用传参，其中里面的参数是DIV要走的终点。也就是（可视高度-DIV高度）/2+移动高度
};
var timer = null;
function move(end) {
clearInterval(timer); //首先，先关闭之前如果有开启的setInterval;
timer = setInterval(function () {
var oDiv = document.getElementById('div1');
var speed = (end - oDiv.offsetTop) / 5; //计算DIV要走的速度，DIV要走的速度就等于（终点-offsetTop高度）/缩放系数
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //为了避免小数，将其取整
if (oDiv.offsetTop == end) { //当DIV到达终点，则关闭setInterval;
clearInterval(timer);
}
else {
oDiv.style.top = oDiv.offsetTop + speed + 'px'; //移动div
}
}, 30);
}
</script>
</head>
<body style="height: 1000px;">
<div id="div1">
</div>
</body>