侧边栏广告

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         img{
 8             position: absolute;
 9             left:0;
10             top:50px;
11             
12         }
13         #demo{
14             1000px;
15             margin:0 auto;
16         }
17     </style>
18 </head>
19 <script src="../../../tool.js"></script>
20   <script>
21     // 在滚动条发生滚动的时候让广告的top运动到 50 + scrollTop
22     window.onscroll = function () {
23       var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
24       var pic = document.querySelector('#pic')
25       tool.move1(pic, 'top', 50 + scrollTop,function(){
26         console.log(123)
27       })
28     }
29     
30   </script>
31 <body>
32     <img src="images/aside.jpg" alt="" id="pic"/>
33 <div id="demo">
34    <p>天王盖地虎，小鸡炖蘑菇</p>
35    <p>天王盖地虎，小鸡炖蘑菇</p>
36    <p>天王盖地虎，小鸡炖蘑菇</p>
37    <p>天王盖地虎，小鸡炖蘑菇</p>
38    <p>天王盖地虎，小鸡炖蘑菇</p>
39    <p>天王盖地虎，小鸡炖蘑菇</p>
40    <p>天王盖地虎，小鸡炖蘑菇</p>
41    <p>天王盖地虎，小鸡炖蘑菇</p>
42    <p>天王盖地虎，小鸡炖蘑菇</p>
43    <p>天王盖地虎，小鸡炖蘑菇</p>
44    <p>天王盖地虎，小鸡炖蘑菇</p>
45    <p>天王盖地虎，小鸡炖蘑菇</p>
46    <p>天王盖地虎，小鸡炖蘑菇</p>
47    <p>天王盖地虎，小鸡炖蘑菇</p>
48    <p>天王盖地虎，小鸡炖蘑菇</p>
49    <p>天王盖地虎，小鸡炖蘑菇</p>
50    <p>天王盖地虎，小鸡炖蘑菇</p>
51    <p>天王盖地虎，小鸡炖蘑菇</p>
52    <p>天王盖地虎，小鸡炖蘑菇</p>
53    <p>天王盖地虎，小鸡炖蘑菇</p>
54    <p>天王盖地虎，小鸡炖蘑菇</p>
55    <p>天王盖地虎，小鸡炖蘑菇</p>
56    <p>天王盖地虎，小鸡炖蘑菇</p>
57    <p>天王盖地虎，小鸡炖蘑菇</p>
58    <p>天王盖地虎，小鸡炖蘑菇</p>
59    <p>天王盖地虎，小鸡炖蘑菇</p>
60    <p>天王盖地虎，小鸡炖蘑菇</p>
61    <p>天王盖地虎，小鸡炖蘑菇</p>
62    <p>天王盖地虎，小鸡炖蘑菇</p>
63    <p>天王盖地虎，小鸡炖蘑菇</p>
64    <p>天王盖地虎，小鸡炖蘑菇</p>
65    <p>天王盖地虎，小鸡炖蘑菇</p>
66    <p>天王盖地虎，小鸡炖蘑菇</p>
67    <p>天王盖地虎，小鸡炖蘑菇</p>
68    <p>天王盖地虎，小鸡炖蘑菇</p>
69    <p>天王盖地虎，小鸡炖蘑菇</p>
70 </div>
71 </body>
72 </html>