仿淘寶的智能浮動

時間  2020-05-28
標籤 淘寶 智能 浮動 简体版
原文   原文鏈接

 

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html> 
    2. 
   
   
   
   
  2. <html> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4.     <meta charset="utf-8" /> 
    5. 
   
   
   
   
  5.     <title></title> 
    6. 
   
   
   
   
  6.     <style type="text/css"> 
    7. 
   
   
   
   
  7.         #box{float:left;position:relative;width:295px;height: 1000px;} 
    8. 
   
   
   
   
  8.         .div1{} 
    9. 
   
   
   
   
  9.         .div2{position:fixed;_position:absolute;top:3px;z-index:295;} 
    10. 
   
   
   
   
  10.     </style> 
    11. 
   
   
   
   
  11. </head> 
    12. 
   
   
   
   
  12. <body> 
    13. 
   
   
   
   
  13. <br/> 
    14. 
   
   
   
   
  14. <br/> 
    15. 
   
   
   
   
  15. <br/> 
    16. 
   
   
   
   
  16. <br/> 
    17. 
   
   
   
   
  17. <br/> 
    18. 
   
   
   
   
  18. <br/> 
    19. 
   
   
   
   
  19. <br/> 
    20. 
   
   
   
   
  20. <br/> 
    21. 
   
   
   
   
  21. <br/> 
    22. 
   
   
   
   
  22. <br/> 
    23. 
   
   
   
   
  23. <br/> 
    24. 
   
   
   
   
  24. <div id="box"> 
    25. 
   
   
   
   
  25.     <div id="float" class="div1"> 
    26. 
   
   
   
   
  26.         //隨滾動移動的部分代碼 
    27. 
   
   
   
   
  27.     </div> 
    28. 
   
   
   
   
  28. </div> 
    29. 
   
   
   
   
  29. </body> 
    30. 
   
   
   
   
  30. <script type="text/javascript"> 
    31. 
   
   
   
   
  31. (function(){ 
    32. 
   
   
   
   
  32.     var oDiv=document.getElementById("float"); 
    33. 
   
   
   
   
  33.     var H=0,iE6; 
    34. 
   
   
   
   
  34.     var Y=oDiv; 
    35. 
   
   
   
   
  35.     while(Y){H+=Y.offsetTop;YY=Y.offsetParent}; 
    36. 
   
   
   
   
  36.     iE6=window.ActiveXObject&&!window.XMLHttpRequest; 
    37. 
   
   
   
   
  37.     if(!iE6){ 
    38. 
   
   
   
   
  38.         window.onscroll=function() 
    39. 
   
   
   
   
  39.         { 
    40. 
   
   
   
   
  40.             var s=document.body.scrollTop||document.documentElement.scrollTop; 
    41. 
   
   
   
   
  41.             if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}} 
    42. 
   
   
   
   
  42.             else{oDiv.className="div1";} 
    43. 
   
   
   
   
  43.         }; 
    44. 
   
   
   
   
  44.     } 
    45. 
   
   
   
   
  45. })(); 
    46. 
   
   
   
   
  46. </script> 
    47. 
   
   
   
   
  47. </html>
    48.
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程