上下滑动的侧边栏

最新推荐文章于 2020-04-30 13:58:46 发布

Apress92

最新推荐文章于 2020-04-30 13:58:46 发布

阅读量535

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/bin1813/article/details/53513083

版权

javascript 专栏收录该内容

49 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
      div{
         width:100px;
         height:100px;
         background-color:red;
         position:absolute;
         height:100px;
         right:0;
      }
   </style>
</head>
<body style="height:2000px;">
   <script>

      window.onscroll=function () {
            var oDiv=document.getElementById('div');
         var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
         //oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';
         var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
         t=parseInt(t);
         startMove(t);
      }
      var timer=null;
      function startMove(target) {
         clearInterval(timer);
            var oDiv=document.getElementById('div');
            timer=setInterval(function () {
            var speed=(target-oDiv.offsetTop)/8;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(oDiv.offsetTop==target){
                clearInterval(timer);
            }else{
                    oDiv.style.top=oDiv.offsetTop+speed+'px';
            }
            },30)
        }

   </script>
   <div id="div"></div>
</body>
</html>