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