• 明天我们家宝宝满月了
  • 一晚上忙了好几个小时,终于把支付前台通知解决了
  • 原计划要增加另外一种支付方案,现在可能要被搁置了
  • 今天上午刚刚注册了华为云,然后刚刚华为云的客服小姐姐就来电话了,小姐姐声音挺好听的
  • 今天无意中注册了华为云,然后发现跟阿里云基本一个模样,甚至连价格都一样
  • 继续测试一下
  • 发现一个问题就是,微信语音发送说说的时候,不要拦截没有UA的数据请求
  • 测试一下连接
  • 终于下雪了
  • 有赞的支付暂时用不了了,所以重新开发另一个支付插件

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

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

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

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

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用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