欢迎光临
我们一直在努力

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

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

2015050715022859

前言

前几天对主题进行了升级,其中的一个功能就是导航菜单跟随顶部,这里使用了一个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

文件下载

赞(0) 打赏
未经允许不得转载:NixonLi博客 » WordPress添加导航跟随置顶jQuery功能

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏