缓冲菜单

最新推荐文章于 2024-11-10 11:49:10 发布

呼啦_

最新推荐文章于 2024-11-10 11:49:10 发布

阅读量81

点赞数

分类专栏： JavaScript 文章标签： JavaScript CSS 响应式布局滚动定位动态效果

本文链接：https://blog.csdn.net/weixin_44217882/article/details/116522049

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>Document</title>
        <style>
            #menu{width: 100px; height: 100px; background-color: red; position: absolute; right: 0px}
            *{margin: 0px; padding: 0px}
        </style>
        <script>
            window.onload = function(){
                var oMenu = document.getElementById("menu");
                //获取当前的目的值
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                var iH = parseInt(scrollTop + (windowHeight - oMenu.offsetHeight) / 2);

                startMove(iH);


                window.onscroll = function(){
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                    var iH = parseInt(scrollTop + (windowHeight - oMenu.offsetHeight) / 2);

                    startMove(iH);
                }

                window.onresize = function(){
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                    var iH = parseInt(scrollTop + (windowHeight - oMenu.offsetHeight) / 2);

                    startMove(iH);
                }
            }

            var timer = null;
            function startMove(iTarget){
                var oMenu = document.getElementById("menu");
                clearInterval(timer);
                timer = setInterval(function(){
                    //计算速度
                    var speed = (iTarget - oMenu.offsetTop) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    //运动和停止分开
                    if(oMenu.offsetTop == iTarget){
                        clearInterval(timer);
                    }else{
                        oMenu.style.top = oMenu.offsetTop + speed + 'px';
                    }

                }, 30);
            }
        </script>
    </head>
    <body style = 'height: 3000px'>
        <div id = 'menu'></div>
    </body>
</html>