侧边栏悬浮 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             #div1{width: 100px; height: 150px;background-color:red;position: absolute;
 8             right:0;bottom: 0;}
 9 
10         </style>
11         <script>
12             window.onload=window.onscroll=function(){
13                 var oDiv=document.getElementById('div1');
14                 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
15 
16                 // oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetLeft+scrollTop)/2+'px';
17 
18                 startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
19             }
20 
21             var timer=null;
22             function startMove(iTarget){
23                 var oDiv=document.getElementById('div1');
24 
25                 clearInterval(timer);
26                 timer=setInterval(function(){
27                     var speed=(iTarget-oDiv.offsetTop)/4;
28                     speed=speed>0?Math.ceil(speed):Math.floor(speed);
29                     if(oDiv.offsetTop==iTarget){
30                         clearInterval(timer);
31                     }
32                     else{
33                         document.title=oDiv.offsetTop;
34                         document.getElementById('txt1').value=oDiv.offsetTop;
35                         oDiv.style.top=oDiv.offsetTop+speed+'px';
36                     }
37                 },30)
38             }
39         </script>
40     </head>
41     <body style="height: 2000px;">
42         <input type="text" id="txt1" style="position: fixed;right: 0; top: 0;" />
43         <div id="div1">
44         </div>
45     </body>
46 </html>
View Code

 

posted @ 2020-04-28 10:15  孝文  阅读(222)  评论(0)    收藏  举报