CSS实现将div固定在页面指定地方

    用一个div作为提示信息或者与用户交互的层控件,需要让它随着页面的滚动而固定在屏幕的某个地方。js可以实现这个功能,当页面滑动的时候,计算位置,然后改变div的top属性即可。但是这样作出来的效果,恐怕没人会满意,因为抖的太厉害了,不能很及时的改变位置。

      要是能做到平滑的,一点都看不出来的技术来达到这种效果,恐怕只有css了。

[xhtml:showcolumns] view plaincopy
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
  1. <html>  
  2. <head>  
  3.     <title></title>  
  4.     <style type="text/css">   
  5.        html,body {  
  6.             overflow:hidden;  
  7.             margin:0px;  
  8.             width:100%;  
  9.             height:100%;  
  10.         }  
  11.   
  12.         .virtual_body {  
  13.             width:100%;  
  14.             height:100%;  
  15.             overflow-y:scroll;  
  16.             overflow-x:auto;  
  17.         }  
  18.   
  19.         .fixed_div {  
  20.             position:absolute;  
  21.             z-index:2008;  
  22.             bottom:20px;  
  23.             left:40px;  
  24.             width:800px;  
  25.             height:40px;  
  26.             border:1px solid red;  
  27.             background:#e5e5e5;  
  28.         }  
  29.     </style>  
  30. </head>  
  31.   
  32. <body>  
  33. <div class="fixed_div">I am still here!</div>  
  34. <div class="virtual_body">  
  35.     <div style="height:1800px;">  
  36.         I am content !  
  37.     </div>  
  38. </div>  
  39. </body>  
  40. </html>  

效果非常好,呵呵。

相关推荐