JQuery添加底部固定导航条

最新推荐文章于 2022-08-29 17:41:49 发布

原创最新推荐文章于 2022-08-29 17:41:49 发布 · 7.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #jquery插件 #ie #firefox #scroll #css

JAVA 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在IE6/7浏览器中实现固定底部导航条的方法，解决了在这些浏览器下出现的闪烁问题，并确保了兼容性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目需要在系统页面底部添加一个导航条，效果类似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不存在也可以。