• 主题更新一下,修复了头像挂掉的问题

  • 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

  • 经过确认,微软的必应搜索在中国被屏蔽

  • 给主题增加一个阿里云的代码库

  • 正式通知一下,有赞支付已经停止业务了

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

WordPress 云落 4年前 (2015-05-07) 807次浏览 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
  下载声明:本站文件大多来自于网络,仅供学习和研究使用,不得用于商业用途,如有版权问题,请联系博猪!
  下载地址:可乐云下载可乐云下载可乐云下载

-- 完 --
WordPress添加导航跟随置顶jQuery功能
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送 WordPress 小技巧,你可以随时退订,欢迎订阅哦~

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress添加导航跟随置顶jQuery功能

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress添加导航跟随置顶jQuery功能
喜欢 (11)
[sp91@qq.com]
分享 (0)
云落
关于作者:
无折腾,不生活,我是一个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