博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

仿淘宝的浮动工具栏（兼容IE6和其他浏览器）

Posted on 2012-09-13 17:20  Leon zhang  阅读(559)  评论(0)  编辑  收藏  举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
    <title>仿淘宝的浮动工具栏</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />  
    <style type="text/css">  
    #box{float:inherit;position:relative;width:500px;}  
    .div1{}  
    .div2{position:fixed;_position:absolute;top:-1px;z-index:295;}  
    </style>     
</head>  
    
  <body>  
  <h2>仿淘宝的浮动工具栏</h2>  
  <div id="box">   
    <div id="float" class="div1" style="float: left; width:500px; background:#ddd">
        <table width="100%" style=" border:1">
        <tr>
        <td>
            <select>
                <option value="1">内容1xxxxxxxx</option>
                <option value="2">内容2</option>
                <option value="3">内容3</option>
                <option value="4">内容4</option>
                <option value="5">内容5</option>
            </select>
        </td>
        <td>
            <select>
                <option value="1">内容1yyyyyyyy</option>
                <option value="2">内容2</option>
                <option value="3">内容3</option>
                <option value="4">内容4</option>
                <option value="5">内容5</option>
            </select>
        </td>
        <td><input  type="text" id="text1" /><input type="button" value="确定" /><input type="button" value="取消" /></td>
        </tr>
        </table>
    </div>    
      
     <br/>  
     <br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>
        //随滚动移动的部分代码<br/>   
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>   
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>   
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
        //随滚动移动的部分代码<br/>  
  </div>  
  <script type="text/javascript">
      (function () {
          var oDiv = document.getElementById("float");

            var iE6 = window.ActiveXObject && !window.XMLHttpRequest;//判断是否是IE6
            var H = 0;
            var Y = oDiv;
            while (Y) {
                H += Y.offsetTop; 
                Y = Y.offsetParent
            };
            //window.onscroll 事件用于捕捉页面垂直和水平的滚动
            window.onscroll = function () {
                var s = document.body.scrollTop || document.documentElement.scrollTop;
    
                if (s > H) {
                    oDiv.className = "div1 div2";
                    if (iE6) { oDiv.style.top = (s - H) + "px"; }
                }
                else {
                    oDiv.className = "div1";
                }
            };
      })();   
    </script>
   
  </body>  
</html>