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

zoukankan html css js c++ java

仿淘宝的浮动工具栏（兼容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>

查看全文

相关阅读:
Apache Shiro在web开发安全框架中的应用
 大数据分布式存储方案的两种部署模式-分离式和超融合
 [想明白]你真的愿意把荣誉归给团队或他人吗？
[想明白]如果你要选择工作，是大公司还是小公司？
[杂谈]交通工具orca card
[IT新应用]农民朋友的电子商务
 [听听音乐]love is blue
[学点英语]扎克伯格给女儿的信，translation of zucherber's letter to her daughter( Chinese version)
[IT学习]微软如何做网站内容治理
 [IT学习]PowerBi 入门

原文地址：https://www.cnblogs.com/zhangliangzlee/p/2683698.html