讓畫面中某個區塊或圖形固定在整個瀏覽器視窗的某個位置，不隨著捲軸而移動

如何讓畫面中某個區塊或圖形固定在整個瀏覽器視窗的某個位置，不隨著捲軸而移動？

這個有幾種作法，其中一種，最簡單的，就是利用CSS的Potision屬性，有一個設定值為fixed，這樣，設定的TOP跟LEFT就會讓那個物件固定在該位置，不會因為捲軸捲動或放大縮小，聽起來一切都很完美，只有一點小瑕疵，就是當使用瀏覽器的放大縮小的時候，這個圖形或區塊的大小不會變，但是，這物件裡頭的物件（比方Label）或文字則會跟著放大，這樣，我現在的老闆不能接受，因為他會放大到400％倍，然後說內容都亂了（大囧）


沒辦法，只好用另外一種方法，就是自己寫Script來控制，這個也不難，就是把該物件，比方DIV，設定Potision為absolute，然後取得瀏覽視窗高跟寬，以視窗的高來減去物件高度加上ScrollY以及用視窗的寬減去物件寬度加上ScrollX（備註一）。把上述的這個計算公式寫在Resize()跟Window.Scroll()事件中，隨時把位置固定。




備註一：由於各家瀏覽器不同，所以取得視窗高度、寬度的方式有所不同。取得捲軸位置也有所不同。



//取得瀏覽器視窗高度
function getBrowserHeight() 
{
    if ($.browser.msie) 
{
        return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
    } 
else 
{
        return self.innerHeight;
    }
}




//取得瀏覽器捲軸位置X
function getBrowserScrollX() 
{
    if ($.browser.msie) 
{
        return document.body.parentNode.scrollLeft;
    } 
else 
{
        return window.scrollX;
    }
}

JS的Alert要謹慎使用

Alert本身就是個畫面不優，很陽春的秀訊息對話框，最好僅拿來DEBUG的時候用，因為除了畫面之外，他還是個會卡畫面的Modal Dialog，這會讓處於同一個Session的頁面的JavaScript都會停止，比方說HTML5的Audio元件，我想Video元件也會，但，如果是Script無法執行，那應該連控制個畫面都會無法進行。這個沒有測試過，就不敢確定了