使用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 20 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 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生成xml简单实例代码
2009/12/16 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
JS判定是否原生方法
2013/07/22 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
python如何使用腾讯云发送短信
2020/09/17 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
成功的餐厅经营创业计划书
2014/01/15 职场文书
50岁生日感言
2014/01/23 职场文书
社区活动策划方案
2014/08/21 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
爱国主题班会教案
2015/08/14 职场文书
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL