使用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日程管理控件glDatePicker用法详解
Mar 29 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
JQuery animate动画应用示例
May 14 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
使用Apache的rewrite技术
2006/06/22 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
佳能法国商店:Canon法国
2019/02/14 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
2015关于重阳节的演讲稿
2015/03/20 职场文书
优秀员工演讲稿
2019/06/21 职场文书
创业计划书详解
2019/07/19 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers