使用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 submit()不能提交表单的解决方法
Apr 24 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery实现评论模块
Aug 19 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP反向代理类代码
2014/08/15 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
Js 中debug方式
2010/02/07 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
js实现电灯开关效果
2021/01/19 Javascript
Python中super关键字用法实例分析
2015/05/28 Python
Python自定义线程池实现方法分析
2018/02/07 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
python的Jenkins接口调用方式
2020/05/12 Python
为什么是 Python -m
2020/06/19 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
开办化妆品公司创业计划书
2013/12/26 职场文书
高考备战决心书
2014/03/11 职场文书
学前班评语大全
2014/05/04 职场文书
党员活动总结
2015/02/04 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python