原生JS实现各种运动之悬浮侧边栏

发布于

在做网站开发的时候，经常会用到悬浮的侧边栏，让一些信息一直显示在当前的屏幕下，如联系方式与分享，下面给大家分享一个小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(&#39;div1&#39;);
        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(&#39;div1&#39;);
        clearInterval(timer);
        timer = setInterval(function () {
            var iSpeed = (iTarget - oDiv.offsetTop) / 8;
            iSpeed = iSpeed &gt; 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if (oDiv.offsetTop == iTarget) {
                clearInterval(timer);
            } else {
                oDiv.style.top = oDiv.offsetTop + iSpeed + &#39;px&#39;;
            }
        }, 30);
    }
&lt;/script&gt;



</head>


<body style="height:2000px;">

<div id="div1"></div>

</body>


</html>

#网站开发