众所周产于公元2002年、且当前为我国主流的IE6浏览器是不支持CSS2的静止定位属性fixed，蛋疼的前端工程师们为此发明了各种形式的解决方案：
一、常规js解决之道
这个最为古老，应用广泛，比如很多跟着滚动条走的对联广告就是使用此方案。缺点就是拖动滚动条元素抖动很厉害，虽然通过平滑处理可以改善下，效果仍然不理想。不过要说的是此方案虽然视觉效果差了那么一点，稳定性是没得说的。
二、动用HTML结构与布局模拟法
此方案曾经被163博客应用，163把所有的内容放在一个高度100%且滚动条设置为自动的容器中，然后再下面设置一个绝对定位的层，这样这个绝对定位的层就可以达到静止状态。原理：你拖动的滚动条并不是拖动的整个页面，而是那个模拟整页的容器，所以容器外的地方都是“静止”的。详细：
以下为引用的内容： <!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>
<style>
*{margin:0}
body{
height:1000px;
width:1000px;
}
#a{
width:300px;
height:100px;
background:red;
}
</style>
<script>
var isie6 = window.XMLHttpRequest?false:true;
window.onload = function(){
var a = document.getElementById('a');
var d = document.getElementById('d');
if(isie6){
a.style.position = 'absolute';
window.onscroll = function(){
d.innerHTML = '';
}
}else{
a.style.position = 'fixed';
}
a.style.right = '0';
a.style.bottom = '0';
}
</script>
</head>
<body>
<div id ="d" style="display:none;"></div>
<div id='a'>test</div>
</body>
</html> |
这里视觉效果达到完美，问题有三：
1、需要改变HTML结构（此项不解释）
2、破坏了用户体验：我曾经也试过此方法，但是我刷新页面的时候滚动条不会停留在原处，这点我不能容忍。
3、破坏js一些事件，如cloudgamer提到会破坏window的scroll事件，这里至少可以让N多封装好的js组件失效。
三、前无古人的“清空法”之火星方法解决
原理实在离奇，我解释不了，并且应用的局限性太大了。例子见：
以下为引用的内容： <!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>
<style>
*{margin:0}
body{
height:1000px;
width:1000px;
}
#a{
width:300px;
height:100px;
background:red;
}
</style>
<script>
var isie6 = window.XMLHttpRequest?false:true;
window.onload = function(){
var a = document.getElementById('a');
var d = document.getElementById('d');
if(isie6){
a.style.position = 'absolute';
window.onscroll = function(){
d.innerHTML = '';
}
}else{
a.style.position = 'fixed';
}
a.style.right = '0';
a.style.bottom = '0';
}
</script>
</head>
<body>
<div id ="d" style="display:none;"></div>
<div id='a'>test</div>
</body>
</html> |
四、老技术新用的expression加fixed背景方案
此方案能够视觉上完美的实现静止定位。例子：
cloudgamer：AlertBox 弹出层（信息提示框）效果
我以前的：《简易的全屏透明遮罩（lightBox）解决方案》
