使用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异步提交表单实例
May 30 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 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入门基础之php代码写法
2011/12/30 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
jQuery实现弹幕效果
2017/02/17 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
Python新手如何理解循环加载模块
2020/05/29 Python
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
数字漫画:comiXology
2020/06/13 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
幼教简历自我评价
2014/01/28 职场文书
十一酒店活动方案
2014/02/20 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
结婚喜宴主持词
2014/03/14 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
postgresql中如何执行sql文件
2023/05/08 PostgreSQL