使用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 EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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程序员编程注意事项
2008/04/10 PHP
第四章 php数学运算
2011/12/30 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
印度网上药店:1mg
2017/10/13 全球购物
英国家用电器购物网站:Hughes
2018/02/23 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
铁路工务反思材料
2014/02/07 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
Python中的套接字编程是什么?
2021/06/21 Python
Nginx跨域问题解析与解决
2022/08/05 Servers