使用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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 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分页函数代码(简单实用型)
2010/12/02 PHP
PHP四大安全策略
2014/03/12 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
JavaScript 指导方针
2007/04/05 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
python实现取余操作的简单实例
2020/08/16 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
西班牙手机之家:Phone House
2018/10/18 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
广州盈通面试题
2015/12/05 面试题
《小熊住山洞》教学反思
2014/02/21 职场文书
英语教师求职信
2014/06/16 职场文书
交通事故委托书范本
2014/09/28 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
雷锋的观后感
2015/06/10 职场文书
行政处罚事先告知书
2015/07/01 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
python实现学生信息管理系统(面向对象)
2022/06/05 Python