使用 jQuery.Pin 垂直滚动时固定导航
ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击。
jQuery Pin
借助jQuery的一个插件 jQuery.Pin,这个插件可在用来固定页面中的元素。
http://webpop.github.io/jquery.pin/
添加脚本
向页面中添加脚本,使用 jquery.pin 来固定导航。为了减少添加脚本的次数,可以将脚本添加到布局中,这样所有使用该局的页面都会应用到。
1. 布局组件 -> 默认布局 -> 底部 将脚本添加到页面的底部。

2. 选择脚本组件,点击下一步

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实现页面滚动时顶部导航显示隐藏效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- 基于jquery的垂直滚动触发器,多参数可设置。
最近闲来无事,多封装些功能性组件.后期会有更多放出来,大家可以多关注一下. 先上参数: type:"show", 默认为“show”,“show”意为当能够在可 ...
- h5滚动页面固定导航
1.需要效果 2.实现方法 (1)原生js实现 document.addEventListener('scroll', function (event) { var scrollDamo = wind ...
- jQuery实现页面滚动时顶部动态显示隐藏
http://www.jqcool.net/jquery-scroll.html 另外headroom.js也行:http://www.bootcss.com/p/headroom.js/
- jQuery图片垂直滚动焦点图
在线演示 本地下载
- jQuery 顶部导航尾随滚动,固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
- 自己写一个jQuery垂直滚动栏插件(panel)
html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...
- jquery 固定导航
网页代码: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> & ...
- [转]jquery.vTicker(垂直滚动)
转至:http://www.w3ci.com/plugin/660.html 简介 vTicker 是一款非常小巧的 jQuery 垂直滚动插件,压缩后只有 2KB.vTicker 支持自定义滚动时间 ...
随机推荐
- python select epoll poll的解析
select.poll.epoll三者的区别 select select最早于1983年出现在4.2BSD中,它通过一个select()系统调用来监视多个文件描述符的数组(在linux中一切事物皆文件 ...
- Java解决TopK问题(使用集合和直接实现)
在处理大量数据的时候,有时候往往需要找出Top前几的数据,这时候如果直接对数据进行排序,在处理海量数据的时候往往就是不可行的了,而且在排序最好的时间复杂度为nlogn,当n远大于需要获取到的数据的时候 ...
- 脚本语言:Xmas(二)
本篇,来谈谈类型系统,以及部分与垃圾收集器相关的内容. 一.基本类型 Xmas的基本类型:Null.Boolean.Label.String.Ref.Function.Integer.Float.De ...
- Android -- Android下的NDK开发(一)
1,NDK是什么?为什么要进行NDK开发? NDK:Native Development Kit.Android应用运行在Dalvik虚拟机中.NDK允许开发人员使用本地代码语言(例如C和C++)实现 ...
- C字符串处理函数
部分参考百科. C常用字符串函数:字符串输入函数,字符串输出函数,字符串处理函数,标准输入输出流 字符串处理函数: 1.字符串长度:strlen(str),返回字符串实际长度,不包括'\0',返回值类 ...
- 自定义input默认placeholder样式
input::input-placeholder { color: #fb4747; } input::-webkit-input-placeholder { color: #fb4747; } in ...
- 复选框选中删除行(DOM练习)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JS的内置对象以及JQuery中的部分内容
[js中的数组] 1 数组的概念:可以再内存中连续存储的多个有序元素的结构 元素的顺序:称为下标,通过下标查找对应元素. ...
- spring学习总结一----控制反转与依赖注入
spring作为java EE中使用最为广泛的框架,它的设计体现了很多设计模式中经典的原则和思想,所以,该框架的各种实现方法非常值得我们去研究,下面先对spring中最为重要的思想之一----控制反转 ...
- linux 中的搜索命令
which 查看可执行文件的位置. whereis 查看文件位置. locate 配合数据库查看文件位置. find 实际搜索硬盘查询文件名称. grep 查找文件内容 一般不常用find命令,因为f ...