眾所周產於公元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）解決方案》
