在做网站开发的时候，经常会用到悬浮的侧边栏，让一些信息一直显示在当前的屏幕下，如联系方式与分享，下面给大家分享一个小Demo，实现效果如下：
以下是代码实现，欢迎大家复制粘贴及吐槽。
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现各种运动之悬浮侧边栏</title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
}
</style>
<script type="text/javascript">
window.onscroll = function () {
var oDiv = document.getElementById('div1');
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var t = scrollTop (document.documentElement.clientHeight - oDiv.offsetHeight) / 2;
// 目标点可能是小数，要取整，防止跳动
startMove(parseInt(t));
};
var timer = null;
function startMove(iTarget) {
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function () {
var iSpeed = (iTarget - oDiv.offsetTop) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (oDiv.offsetTop == iTarget) {
clearInterval(timer);
} else {
oDiv.style.top = oDiv.offsetTop iSpeed 'px';
}
}, 30);
}
</script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>
