固定於頁面上的Toolbar with jQuery for IE6 plus/FF/Chrome/Safari

相信大家發現, 越來越多網站使用固定浮動的Footer or Navigation, 介紹幾個Plugin給大家參考，能不能符合各家瀏覽器就得花時間測試了。

http://static.jqueryfordesigners.com/demo/fixedfloat.html
http://tympanus.net/Tutorials/FixedFadeOutMenu/
http://ettoz.wordpress.com/2009/04/16/jquery-fixed-bar/

下方的程式是我搭配jQuery寫出來的結果，IE6以上FF,Chrome,Safari可以使用，但定位的時候會有閃影，需要花更多時間修正，也許等我修好了，IE6也陣亡了ㄅ~

為了解決跨瀏覽器的問題，以下有關browserwindow的屬性提供給大家參考, 相信會大有幫助

http://www.howtocreate.co.uk/tutorials/javascript/browserwindow


My Demo Here :http://cindy8.myweb.hinet.net/css/bar_jquery2.html
(因為Hinet塞了廣告無法正確瀏覽請下載方能正確瀏覽)

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$.fn.fixedbar = function(options){

var IDtop= document.documentElement.clientHeight - $(options).height();

$(options).css({"top": IDtop+ $(window).scrollTop()});



$(window).bind('scroll resize', function() {

$(options).css({"top": IDtop+ $(window).scrollTop()});

});

}



jQuery.fn.fixedbar('#toolbar');
});