使用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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
使用jquery实现轮播图效果
Jan 02 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 过滤危险html代码
2009/06/29 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
jquery获得下拉框值的代码
2011/08/13 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
angularjs基础教程
2014/12/25 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
js实现点击烟花特效
2020/10/14 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
python调用windows api锁定计算机示例
2014/04/17 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
django的ORM操作 增加和查询
2019/07/26 Python
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
信息合作协议书
2014/10/09 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
信息技术研修心得体会
2016/01/08 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
浅谈python中的多态
2021/06/15 Python
nginx lua 操作 mysql
2022/05/15 Servers