WordPress添加导航跟随置顶jQuery功能

前言

前几天对主题进行了升级，其中的一个功能就是导航菜单跟随顶部，这里使用了一个 jQuery 插件实现了，今天这里就简单说一下吧。

jQuery 说明

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

jQuery 使用

首先引入 jQuery 文件，最好是在底部引入。

1. <scriptsrc=“js/jquery.min.js”></script>
2. <scriptsrc=“js/posfixed.js”></script>

jQuery 本身一般 WordPress 主题都会引入了，所以一般不需要的。

查看导航 HTML 结构

这里简单的假设一个 id:nav 吧

1. <divid=“nav”></div>

这里先预设了一个导航 HTML 结构

初始化 jQuery 插件

1. $(document).ready(function(){
2. $(“#nav”).posfixed({
3. distance:0,
4. pos:“top”,
5. type:“while”,
6. hide:false
7. });
8. });

这一段 JavaScript 放在底部就可以了，具体参数下面再说。

插件参数

兼容性

本 jQuery 插件兼容以下浏览器

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