使用jQuery.Pin垂直滚动时固定导航


Posted in jQuery onMay 24, 2017

ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击。

jQuery Pin

借助jQuery的一个插件 jQuery.Pin,这个插件可在用来固定页面中的元素。

http://webpop.github.io/jquery.pin/

添加脚本

向页面中添加脚本,使用 jquery.pin 来固定导航。为了减少添加脚本的次数,可以将脚本添加到布局中,这样所有使用该局的页面都会应用到。

1. 布局组件 -> 默认布局 -> 底部 将脚本添加到页面的底部。

使用jQuery.Pin垂直滚动时固定导航

2. 选择脚本组件,点击下一步

使用jQuery.Pin垂直滚动时固定导航

3. 输入以下脚本内容,保存

<script type="text/javascript" src="http://cdn.zkea.net/Scripts/jquery.pin.min.js"></script>
<script type="text/javascript">
$(function () {
$(".navigation").closest(".widget").parent().css("z-index",10000).pin();
})
</script>

使用jQuery.Pin垂直滚动时固定导航

这样就完成了,可以到对应的页面去预览一下效果了。

使用jQuery.Pin垂直滚动时固定导航

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jquery append与appendTo方法比较
May 24 #jQuery
jQuery日期范围选择器附源码下载
May 23 #jQuery
最常用的jQuery表单验证(简单)
May 23 #jQuery
jquery实现简单实用的轮播器
May 23 #jQuery
jquery实现图片轮播器
May 23 #jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 #jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 #jQuery
You might like
聊天室php&amp;mysql(五)
2006/10/09 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
PHP处理会话函数大总结
2015/08/05 PHP
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
快速入手Python字符编码
2016/08/03 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
留学推荐信中文范文三篇
2014/01/25 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
面试通知单大全
2015/04/20 职场文书
安全温馨提示语大全
2015/07/14 职场文书
运动会加油稿50字
2015/07/21 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
公司管理建议书
2015/09/14 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS