JS实现右侧悬浮框随着页面的上下轮动而移动

最新推荐文章于 2021-06-16 07:06:00 发布

枫叶&情缘

最新推荐文章于 2021-06-16 07:06:00 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45791806/article/details/106100586

版权

JavaScript 专栏收录该内容

71 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div{
            width: 200px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 40%;
        }
    </style>
    <script>
        window.onscroll = function () {
            var oDiv = document.getElementById('div');
            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            //oDiv.style.top = (document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
            startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
        };
        var time = null;
        function startMove(iTarget){
            var oDiv = document.getElementById('div');
            clearInterval(time);
            time = setInterval(function(){
                var speed = (iTarget-oDiv.offsetTop)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                if(oDiv.offsetTop == iTarget){
                    clearInterval(time)
                }else{
                    oDiv.style.top = oDiv.offsetTop+speed+'px';
                }
            },30)
        }
    </script>
</head>
<body style="height: 2000px;">
    <div id="div"></div>
</body>
</html>