本站使用的导航悬浮跟随jQuery插件
前言
前几天对主题进行了升级,其中的一个功能就是导航菜单跟随顶部,这里使用了一个jQuery插件实现了,今天这里就简单说一下吧。
jQuery说明
Posfixed 能够让网页的导航或表头等固定在顶部或底部,让用户更方便的操作或查看信息,淘宝网、易迅网等电子商务网站常常用到这种效果。除了导航和表头,也可以固定其他内容,比如广告、返回顶部等等,同时 Posfixed 也可以作为 IE6 不支持 fixed 的一个解决方案。
jQuery使用
首先引入jQuery文件,最好是在底部引入。
<script src="js/jquery.min.js"></script> <script src="js/posfixed.js"></script>
jQuery本身一般WordPress主题都会引入了,所以一般不需要的。
查看导航HTML结构
这里简单的假设一个id:nav吧
<div id="nav"></div>
这里先预设了一个导航HTML结构
初始化jQuery插件
$(document).ready(function(){ $("#nav").posfixed({ distance:0, pos:"top", type:"while", hide:false }); });
这一段JavaScript放在底部就可以了,具体参数下面再说。
插件参数
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
direction | 字符串 | 方向,相对于顶部(top)或底部(bottom)固定 | top |
type | 字符串 | 固定的方式,可选 while 或 always,while 为滚动条滚动到 distance 的数值时固定;always 为一直固定 | while |
hide | 布尔值 | 是否自动隐藏固定的对象 | false |
distance | 整数 | 离顶部或底部的数值 | 0 |
tag | 对象 | 导航到一个元素 | null |
兼容性
本jQuery插件兼容以下浏览器
- Firefox 2+
- Internet Explorer 6+
- Safari 2+
- Opera 9+
- Chrome
相关链接
文件下载 |
文件名称:WordPress导航悬浮跟随jQuery插件 | 文件大小:2.87KB |
下载声明: | ||
下载地址:可乐云下载可乐云下载可乐云下载 |
-- 完 --
狗日的,我就说你怎么固定悬浮导航栏的,原来如此啊
@同盟源 嘿嘿
@同盟源 我用css就是没法固定,原来是这样