本站使用的导航悬浮跟随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

关注公众号『窗外天空』
获取更多建站运营运维新知!互联网创业、前沿技术......
最新评论
水淀粉vdfv
有其他下载方式么,网站上的点击下载后没有任何反应,或者直接发给我一下?83835079@qq.com
你好,我的型号ELECOM WRC-X3200GST3,ARMv8 Processor rev 4构架,CPU mediatek/mt7622,找了很久没有找到
我的也是这样。一直无法确认ARCH架构,或是不支持。一直没办法用。不知道怎么办了
您好,现在安装上了,可是ssr plus+配置好节点也没用,一直都是未运行,节点是有效的; 另外那个passwall2一找开就提示"无法确认ARCH架构,或是不支持", 麻烦大佬帮忙看下是什么问题,谢谢!