本站使用的导航悬浮跟随 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 |
| 下载声明：本站文件大多来自于网络，仅供学习和研究使用，不得用于商业用途，如有版权问题，请联系博猪！ | ||
| 下载地址：可乐云下载可乐云下载可乐云下载 | ||
-- 完 --
扫码订阅，第一时间获得更新
微信扫码二维码，订阅我们网站的动态，另外不定时发送 WordPress 小技巧，你可以随时退订，欢迎订阅哦~
