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>