到指定位置浮动代码

2015年06月20日 03:07 by:老修--走失的镜头盖

老板博客相关文章到指定位置浮动代码


到指定位置浮动代码

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>test</title>
      1. <script type="text/javascript" src="http://www.lao8.org/js/jquery.js"></script>
      2. <script type="text/javascript">
      3. // $(document).ready(function(){
      4. $(window).load(function(){
      5. //start float 
      6. var divid = $("#cc"); //这里的#cc换成要浮动的元素的id
      7. var p=divid.position().top;
      8. var k=divid.width();
      9. $(document).scroll(function(){
      10. var d = $(document).scrollTop(); 
      11. if (d>p){
      12. divid.css({
      13.  "position":"fixed",
      14.  "top":"0",
      15. });
      16. }else{
      17. divid.css({
      18.  "position":"",
      19.  "top":"",
      20.  "width":k,
      21. });
      22. }
      23. });
      24. //end float
      25. });
      26. </script>
  5. <style>
  6. div {border:1px solid;}
  7. #aa {width:300px; height:5000px; margin-left:100px;}
  8. #bb {height:500px;}
  9. #cc {border:1px solid #ff0000;}
  10. </style>
  11. </head>
  12. <body>
  13. <br>
  14. <br>
  15. <br>
  16. <br>
  17. <br>
  18. <br>
  19. <br>
  20. <br>
  21. <br>
  22. <br>
  23. <br>
  24. <br>
  25. <br>
  26. <br>
  27. <br>
  28. <br>
  29. <div "aa">
  30. <div "bb">www.lao8.org</div>
  31. <div "cc">afsdf</div>
  32. </div>
  33. </body>
  34. </body>
  35. </html>

缩进部分为核心代码
标签:浮动代码