用JS計算左右邊距固定position: fixed;位置方法!!-教學撰寫:徐嘉裕Neil hsu

在使用CSS的position: fixed浮動區塊最常遇到的問題就是無法指定位置，position: fixed的左右邊距是以瀏覽器的總寬度來做計算，所以假使您在1440px解析度設的position: fixed;位置是正確的，但如果吧解析度放大或縮小時，fixed區塊位置就會跑掉，例如下面圖示!

假使瀏覽器解析度為1440px，左右fixed區塊剛好在兩邊!

可是如果吧解析度改成1920，內容區#tpl-content寬度不變還是1280px，可是左右區塊卻是以瀏覽器的總寬度為主，因此就會變成下面這樣：

解決的方法就是用js來計算指定物件對齊左右邊距，方法如下：

js部分

$(window).load(function() {

var position = $('#tpl-content').offset();

var x = position.left;  //取得#tpl-content容器的left位置

var r =$('#tpl-content').width();

$("#leftframe").css("left", x-80+"px");  //計算左區塊位置

$("#righttframe").css("left", x+r+"px");  //計算右區塊位置

});


css部分

//左邊浮動區塊

#leftframe {

position: fixed;

top: 0px;

width: 80px;

height: 800px:

background: url(../../img/frame/01.jpg) repeat-y left top;

}

//右邊浮動區塊

#righttframe {

position: fixed;

top: 0px;

width: 80px;

height: 800px:

background: url(../../img/frame/02.jpg) repeat-y left top;

}

這樣即使瀏覽器設成1920左右浮動物件仍然會貼其#tpl-content容器的邊緣，不會在跑掉了。

有需要的朋友參考看看!

教學撰寫：徐嘉裕 Neil hsu