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

本站使用的导航悬浮跟随jQuery插件

前言

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

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

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


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

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

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

<div id="nav"></div>

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

$(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插件兼容以下浏览器

文件下载	文件名称：WordPress导航悬浮跟随jQuery插件	文件大小：2.87KB
	下载声明：
	下载地址：可乐云下载可乐云下载可乐云下载