<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html{ _background:url(about:blank); /* 阻止IE6中闪动 , 把空文件换成about:blank , 减少请求 */ } /* 固定定位图层 */ .fixed { position:fixed; _position: absolute; width: 200px; height: 200px; background: red; top:0; left: 0; _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight); _left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth); } </style> </head> <body> <div class="fixed"></div> <div style="height:1500px"></div> </body> </htm> |
IE5 及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素固有的属性, 也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。
以top为例:
documentElement.scrollTop 页面滚动条“卷”起来的高度值
documentElement.clientHeight 页面实际高度,包括padding
this.offsetHeight 元素实际高度,包括padding,scrollbar,border
documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight = bottom为0时,如果用top来实现应当取多少值
top:0; = _top:expression(documentElement.scrollTop);
bottom:0; = _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);
left:0; = _left:expression(documentElement.scrollLeft);
right:0; = _left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth);
注:尽量避免使用这种方式,因为这会产生大量计算,计算量轻松过万,对浏览器性能损耗很大,浏览器极容易死掉。