JQuery添加底部固定导航条

最近项目需要在系统页面底部添加一个导航条，效果类似facebook。项目组成员上网查了一些办法，也下载了一些JQuery插件使用，但在IE6,IE7下面窗口纵向滚动会闪烁，而jquery.floatdiv有奇怪的运行错误。最后自己整理了一个简单的解决办法，在firefox3.5, IE6, IE7下测试通过。

 

需要固定在底部的DIV对象：

<div id="footpanel">i'm foot panel</div>

 

在firefox下，只要在css中指定

 

#footpanel {

position:fixed;

bottom: 0px;

}

就可以把footpanel固定在底部而且不闪烁，不需要额外的方法。

 

在IE6,IE7下，需要在css中添加

*html #footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/


	margin-top: -1px; /*--Prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/


	position: absolute;

	top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));

}



呃，上面的方法是从

http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/

抄来的，将footpanel固定在页面底部。不要问我这个表达式是什么意思。



不过上面的样式添加之后，仍然不能解决在IE6,IE7下闪烁的问题，最后在jquery.floatdiv插件中发现了办法，改写为js代码：



if ($.browser.msie && $.browser.version >= 6 && $.browser <8) {

if ($("body").css("background-image") == "none") {

$("body").css({"background-image":"url(nothing.gif)", "background-attachment":"fixed"});

} else {

$("body").css({"background-attachment" : "fixed"});

}

}



核心思路就是body必须有一个background-image的样式，即使nothing.gif不存在也可以。

剩下的就是设置background-attachment为fixed。