IE7已经支持position:fixed,因此只需判断IE6再单独处理就可以了。
使用expression或setExpression
// IE6
if (window.ActiveXObject && !window.XMLHttpRequest) {
var hj001_quicklogin = hui.c('hj001_quicklogin')[0];
hj001_quicklogin.style.setExpression('top' , 'eval(document.documentElement.scrollTop + Math.max(0, (document.documentElement.clientHeight - 500)*0.4))');
hj001_quicklogin.style.setExpression('left', 'eval(document.documentElement.scrollLeft + Math.max(0, (document.documentElement.clientWidth - 427))/2)');
/*if (!hui.util.hasCssString('hj001_quicklogin_fixed_7181549444794655')) {
hui.util.importCssString('.hj001_quicklogin {_top: expression(document.documentElement.scrollTop + Math.max(0, (document.documentElement.clientHeight - 500)*0.3) + "px");_left: expression(document.documentElement.scrollLeft + Math.max(0, (document.documentElement.clientWidth - 427))/2 + "px")}}', 'hj001_quicklogin_fixed_7181549444794655');
}*/
}
else {
hui.util.importCssString('.hj001_quicklogin {top:' + top + 'px;left:' + left + 'px;}', 'hj001_quicklogin_fixed_7181549444794655');
}
有几点需要注意:
1.使用expression来实现position:fixed的效果时,会出现闪动的现象,可以通过下面的方法解决:
html{_background-image: url('about:blank');_background-attachment:fixed;}
2.判断IE6推荐
window.ActiveXObject && !window.XMLHttpRequest
3.使用setExpression时需要带上eval,否则不会无效
正确:hj001_quicklogin.style.setExpression('top' , 'eval(document.documentElement.scrollTop)');
错误:hj001_quicklogin.style.setExpression('top' , 'document.documentElement.scrollTop');
完整代码如下:
<!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>
<script type="text/javascript">window.g = function(id){return document.getElementById(id)};</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hui demo</title>
<style>
html {_background-image: url("about:blank");_background-attachment: fixed;}
.box {z-index: 9000000;position: fixed; _position: absolute; _top: expression(document.documentElement.scrollTop + Math.max(0, (document.documentElement.clientHeight - 500)*0.3) + "px")}
</style>
<script type="text/javascript">
<!--
var box = {
onresize: function () {
var width = 427,
height = 500,
main = document.getElementById('box');
// IE6
if (window.ActiveXObject && !window.XMLHttpRequest) {
main.style.setExpression('top', 'eval(document.documentElement.scrollTop + Math.max(0, (document.documentElement.clientHeight - ' + height + ')*0.4))');
main.style.setExpression('left', 'eval(document.documentElement.scrollLeft + Math.max(0, (document.documentElement.clientWidth - ' + width + ')*0.5))');
}
else {
main.style.top = Math.max(0, (document.documentElement.clientHeight - height) * 0.3) + 'px';
main.style.left = Math.max(0, (document.documentElement.clientWidth - width ) * 0.5) +'px';
}
}
};
function doit(){
box.onresize();
window.onresize = function () {
box.onresize();
};
}
//-->
</script>
</head>
<body><button type="button" onclick="doit()">doit</button>
<div id="box" class="box" style="border: 2px solid green; width: 427px; height: 500px;">
box
</div>
<p style="height: 1600px;">
txt
</p>
</body>
</html>