使用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 zTree树插件动态加载实例代码
May 11 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jQuery实现本地存储
Dec 22 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出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
php源码的安装方法和实例
2019/09/26 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
python使用pandas实现数据分割实例代码
2018/01/25 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
python写入文件自动换行问题的方法
2019/07/05 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
2014年文明创建工作总结
2014/11/25 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
十二生肖观后感
2015/06/12 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
golang正则之命名分组方式
2021/04/25 Golang
一篇文章带你复习java知识点
2021/06/28 Java/Android
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS