使用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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jquery实现垂直手风琴导航栏
Feb 18 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提交表单发送邮件的方法
2015/03/20 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
python中scikit-learn机器代码实例
2018/08/05 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
python中selenium库的基本使用详解
2020/07/31 Python
应届生简历中的自我评价
2014/01/13 职场文书
服装创业计划书范文
2014/02/05 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
娱乐节目策划方案
2014/06/10 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
离婚起诉书范文2015
2015/05/19 职场文书