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

    <!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; 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> 
  • 相关阅读:
    深入Activity生命周期(一)
    android APK 中英文对比(转)
    android中获得系统语言
    mime Contenttype(http head)（转）
    activity设置全屏
    Activity常用知识
    关于这次数学建模
    排列组合
    hdu 1003 笔记
    杂想
  • 原文地址：https://www.cnblogs.com/zhangliangzlee/p/2683698.html
Copyright © 2020-2023  润新知