再谈IE6之Fixed定位

最新推荐文章于 2022-05-17 21:32:22 发布

damon08708

最新推荐文章于 2022-05-17 21:32:22 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： ie function html javascript scroll div

JavaScript 专栏收录该内容

74 篇文章 0 订阅

订阅专栏

众所周产于公元2002年、且当前为我国主流的IE6浏览器是不支持CSS2的静止定位属性fixed，蛋疼的前端工程师们为此发明了各种形式的解决方案：

一、常规js解决之道

这个方案最为古老，比IE6还老，且应用十分广泛：比如很多跟着滚动条走的对联广告就是使用此方案。缺点就是拖动滚动条元素抖动很厉害，虽然通过平滑处理可以改善下，效果仍然不理想。不过要说的是此方案虽然视觉效果差了那么一点，稳定性与可控性没得二话说的。

二、动用HTML结构与布局模拟法

此方案曾经被163博客应用，163把所有的内容放在一个高度100%且滚动条设置为自动的容器中，然后再下面设置一个绝对定位的层，这样这个绝对定位的层就可以达到静止状态。原理：你拖动的滚动条并不是拖动的整个页面，而是那个模拟整页的容器，所以容器外的地方都是“静止”的。详细：

http://bbs.blueidea.com/thread-2930592-1-1.html

这里视觉效果达到完美，问题有三：

1、需要改变HTML结构（此项不解释）
2、破坏了用户体验：我曾经也试过此方法，但是我刷新页面的时候滚动条不会停留在原处，这点我不能容忍。
3、破坏js一些事件，如cloudgamer提到会破坏window的scroll事件，这里至少可以让N多封装好的js组件失效。

三、前无古人的“清空法”之火星方法解决

原理实在离奇，我解释不了，并且应用的局限性太大了。例子见：
http://bbs.blueidea.com/thread-2938030-1-1.html

四、老技术新用的expression加fixed背景方案

此方案能够视觉上完美的实现静止定位。例子：

cloudgamer：AlertBox 弹出层（信息提示框）效果
我以前的：《简易的全屏透明遮罩(lightBox)解决方案》

这两种方案本来已经很完美了，我artDialog早期版本也是这么实现的，可是后来使用过程中发现了一个更加不能容忍的BUG，我在回复cloudgamer写了BUG触发DEMO：

http://bbs.blueidea.com/viewthread.php?tid=3001496&page=1#pid5047726

这个问题的本质就是用expression模拟fixed外包裹元素实际是设置了absolute，并且遮盖了页面，IE6可能导致其下页面一些元素无法响应事件，如div、td、span等，只有a、button、input等元素可以响应，那些无法响应事件的元素如果包含了文字BUG又会消失。这个美丽的效果下藏了这么一个大坑，让我们情何以堪……

是的，我原来很崇尚这个方案，因为视觉效果完美并且相对简单。但是它的BUG让我万念俱灰，甚至都想放弃对IE6 fixed支持，时不时的以“渐进增强”来说服自己，本身fixed更多的意义是一个视觉效果，重要性不能与absolute的相提并论……好吧，我要说的是有了解决上述BUG的方法，所以“渐进增强”的想法又被我抛到脑后去了（吃不到葡萄就说葡萄酸，吃到了葡萄就甜了..），下面的DEOM代码是我四天前写好的，直到今天才在自己Blog上分享，希望彻底埋了第上述第四方案的坑了：

五、使用js 设置 expression 与 removeExpression 法

 
<!DOCTYPE>
 
  <html xmlns="http://www.w3.org/1999/xhtml">
 
  <head>
 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
  <title>ie6 Fixed</title>
 
  </head>
 
   
 
<body>
 
  <p><button id="fixedBtn">设置静止定位</button><button id="fixedBtn2">改变位置</button></P>
 
  <P><button id="absoluteBtn">设置绝对定位</button><button id="absoluteBtn2">改变位置</button></P>
 
  <div id="fixed" style="width: 60px; height:60px; background:#C0C0C0; border:solid 1px #000;"></div>
 
  <div style="height:1400px;" title="请拖动滚动条"></div>
 
  <script type="text/javascript">
 
  var position = function(){
 
      var isIE6 = !-[1,] && !window.XMLHttpRequest,
 
          html = document.getElementsByTagName('html')[0],
 
          dd = document.documentElement,
 
          db = document.body,
 
          dom = dd || db,
 
          // 获取滚动条位置
 
          getScroll = function(win){
 
              return {
 
                  left: Math.max(dd.scrollLeft, db.scrollLeft),
 
                  top: Math.max(dd.scrollTop, db.scrollTop)
 
                  };
 
          };
 
       
 
      // 给IE6 fixed 提供一个"不抖动的环境"
 
      // 只需要 html 与 body 标签其一使用背景静止定位即可让IE6下滚动条拖动元素也不会抖动
 
      // 注意：IE6如果 body 已经设置了背景图像静止定位后还给 html 标签设置会让 body 设置的背景静止(fixed)失效
 
      if (isIE6 && document.body.currentStyle.backgroundAttachment !== 'fixed') {
 
          html.style.backgroundImage = 'url(about:blank)';
 
          html.style.backgroundAttachment = 'fixed';
 
      };
 
       
 
      return {
 
          fixed: isIE6 ? function(elem){
 
              var style = elem.style,
 
                  doc = getScroll(),
 
                  dom = '(document.documentElement || document.body)',
 
                  left = parseInt(style.left) - doc.left,
 
                  top = parseInt(style.top) - doc.top;
 
              this.absolute(elem);
 
              style.setExpression('left', 'eval(' + dom + '.scrollLeft + ' + left + ') + "px"');
 
              style.setExpression('top', 'eval(' + dom + '.scrollTop + ' + top + ') + "px"');
 
          } : function(elem){
 
              elem.style.position = 'fixed';
 
          },
 
           
 
          absolute: isIE6 ? function(elem){
 
              var style = elem.style;
 
              style.position = 'absolute';
 
              style.removeExpression('left');
 
              style.removeExpression('top');
 
          } : function(elem){
 
            elem.style.position = 'absolute';
 
          }
 
      };
 
  }();
 
  </script>
 
  <script>
 
  var elem = document.getElementById('fixed');
 
  document.getElementById('fixedBtn').onclick = function(){
 
      elem.style.left = '100px';
 
      elem.style.top = '100px';
 
      position.fixed(elem);
 
  };
 
  document.getElementById('fixedBtn2').onclick = function(){
 
      elem.style.left = '400px';
 
      elem.style.top = '100px';
 
      position.fixed(elem);
 
  };
 
  document.getElementById('absoluteBtn').onclick = function(){
 
      elem.style.left = '100px';
 
      elem.style.top = '100px';
 
      position.absolute(elem);
 
  };
 
  document.getElementById('absoluteBtn2').onclick = function(){
 
      elem.style.left = '400px';
 
      elem.style.top = '100px';
 
      position.absolute(elem);
 
  };
 
  </script>
 
  </body>
 
  </html>

新窗口打开演示文档

在实现了ie6 fixed的前提下，实际应用中可能还需要对这个fixed元素调整位置，如鼠标拖拽元素。上面的DEMO同样是使用expression实现，不同的是expression直接应用到了要操作的对象上，这样就不会发生上述BUG了，直接设置在元素上后再想手动改变元素位置（如拖动）是相当困难的，必须有一个可以重置expression的方法，而前些天在msdn上看到的removeExpression方法，问题迎刃而解！你也可以看artDialog3在IE6 fixed的表现。

如果光说到标准的fixed定位除了left与top之外还有right与bottom属性，显然目前此方案支持它们会比较麻烦，还好就是这两个属性在javascript组件中很少用到，不是吗？当然我们如能在能力与精力的范围内满足需求是最好不过的了，如果有更好的方案欢迎提出！

planeart.cn原创文章，原文地址：http://www.planeart.cn/?p=877