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

本站使用的导航悬浮跟随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放在底部就可以了，具体参数下面再说。

插件参数

兼容性

本jQuery插件兼容以下浏览器

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

文件下载

关注公众号『窗外天空』

获取更多建站运营运维新知！
互联网创业、前沿技术......