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 垂直滚动时固定导航的更多相关文章

  1. 基于jQuery实现页面滚动时顶部导航显示隐藏效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  2. 基于jquery的垂直滚动触发器,多参数可设置。

    最近闲来无事,多封装些功能性组件.后期会有更多放出来,大家可以多关注一下. 先上参数: type:"show",           默认为“show”,“show”意为当能够在可 ...

  3. h5滚动页面固定导航

    1.需要效果 2.实现方法 (1)原生js实现 document.addEventListener('scroll', function (event) { var scrollDamo = wind ...

  4. jQuery实现页面滚动时顶部动态显示隐藏

    http://www.jqcool.net/jquery-scroll.html 另外headroom.js也行:http://www.bootcss.com/p/headroom.js/

  5. jQuery图片垂直滚动焦点图

    在线演示 本地下载

  6. jQuery 顶部导航尾随滚动,固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  7. 自己写一个jQuery垂直滚动栏插件(panel)

    html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...

  8. jquery 固定导航

    网页代码: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> & ...

  9. [转]jquery.vTicker(垂直滚动)

    转至:http://www.w3ci.com/plugin/660.html 简介 vTicker 是一款非常小巧的 jQuery 垂直滚动插件,压缩后只有 2KB.vTicker 支持自定义滚动时间 ...

随机推荐

  1. [Linux] PHP程序员玩转Linux系列-nginx初学者引导

    1.PHP程序员玩转Linux系列-怎么安装使用CentOS 2.PHP程序员玩转Linux系列-lnmp环境的搭建 3.PHP程序员玩转Linux系列-搭建FTP代码开发环境 4.PHP程序员玩转L ...

  2. shell脚本编写步骤及其常用命令和符号

    1,什么是Shell     Shell 是kernel的一个外壳,是一个命令解析器,负责用户与内核的交互.2,Shell脚本     Shell脚本类似于批处理,可以方便的执行大量命令.3,编写sh ...

  3. C# CodeFirst编程模型一

    定义实体类型: 定义两个实体Menu和MenuCard,一个menu关联一个menucard,menucard包含对所有menu的引用. public class Menu { public int ...

  4. 深入浅出数据结构C语言版(7)——特殊的表:队列与栈

    从深入浅出数据结构(4)到(6),我们分别讨论了什么是表.什么是链表.为什么用链表以及如何用数组模拟链表(游标数组),而现在,我们要进入到对线性表(特意加了"线性"二字是因为存在多 ...

  5. 详细了解 int? 类型

    一.int?是什么 二.了解Nullable结构体 三.Nullable类型的取值与转换 1.GetValueOrDefault 2.运算符重载 一.int?是什么 说到int?,或者double?, ...

  6. ios UICollectionView简单说明

    原谅我记不住写下来好了 UICollectionViewFlowLayout 流式自动布局 继承于UICollectionViewLayout 初始化:[[UICollectionViewFlowLa ...

  7. hadoop、Storm该选哪一个

    如果hadoop.Storm还感觉混要,那么此篇文章将帮助你把他们完全区分 可以带着下面问题来阅读本文章: 1.hadoop.Storm各是什么运算 2.Storm为什么被称之为流式计算系统 3.ha ...

  8. 一个简单的jquery左右列表内容切换应用

    选中左边某个选项点击添加,即可将选中项添加到右边文本框中,点击选中全部即可将全部选项移到右边,移除按钮功能相同. html代码: <div id="main"> < ...

  9. SIP DB33标准笔记 注册/目录发送/心跳

    SIP协议扩展中: 在 RFC 3261 基础上定义了一个新方法 DO.方法 DO 的功能包括:控制对方动作.更新对方信息.查询对方状态.历史监控资料查询和回放等.发送方法 DO 的请求报文时,不会创 ...

  10. c的旅程---字符

    输出菱形实验: /***************** 2017年四月十六. 第一个例子,输出菱形.就是找关系. 这是当n= 3时, * *** * ******************/ #inclu ...