jquery.posfixed 导航菜单固定头部跟随屏幕滚动jQuery插件

jquery.posfixed 导航菜单固定头部跟随屏幕滚动jQuery插件

说明

Posfixed 能够让网页的导航或表头等固定在顶部或底部，让用户更方便的操作或查看信息，淘宝网、易迅网等电子商务网站常常用到这种效果。除了导航和表头，也可以固定其他内容，比如广告、返回顶部等等，同时 Posfixed 也可以作为 IE6 不支持 fixed 的一个解决方案。

本演示中，导航和右下的“返回顶部”使用了 Posfixed 插件，请注意查看效果。

使用

引入文件

<script src="js/jquery.min.js"></script>
<script src="js/posfixed.js"></script>

HTML

<div id="example1">
</div>

 

JavaScript

$(document).ready(function(){
	$("#example1").posfixed({
		distance:0,
		pos:"top",
		type:"while",
		hide:false
	});             
});

 

参数

参数	类型	说明	默认值
direction	字符串	方向，相对于顶部（top）或底部（bottom）固定	top
type	字符串	固定的方式，可选 while 或 always，while 为滚动条滚动到 distance 的数值时固定；always 为一直固定	while
hide	布尔值	是否自动隐藏固定的对象	false
distance	整数	离顶部或底部的数值	0
tag	对象	导航到一个元素	null
scrollClass	字符串	滚动时新增的css类名	空
scrollStartEvent	函数	开始滚动时触发的函数
scrollOriginalEvent	函数	开始滚动回到初始状态时触发的函数

兼容

Posfixed 兼容以下浏览器：

• Firefox 2+
• Internet Explorer 6+
• Safari 2+
• Opera 9+
• Chrome