• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

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

WordPress 云落 3年前 (2015-05-07) 536次浏览 已收录 13个评论
文章目录[隐藏]

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

WordPress 添加导航跟随置顶 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
  下载声明:本站文件多来自于网络,仅供学习和研究使用,不得用于商业用途,如有版权问题,请联系云落!
  下载地址:可乐云下载可乐云下载可乐云下载

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress 添加导航跟随置顶 jQuery 功能
喜欢 (11)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13)个小伙伴在吐槽
  1. 狗日的,我就说你怎么固定悬浮导航栏的,原来如此啊
    同盟源2015-05-11 19:16 回复 Windows 7 | Chrome 41.0.2272.89
    • 云落
      嘿嘿
      云落2015-05-11 20:01 回复 Windows 8.1 | Firefox浏览器 37.0
    • 我用css就是没法固定,原来是这样
      同盟源2015-05-13 11:52 回复 Windows 7 | Chrome 41.0.2272.89