使用 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 支持自定义滚动时间 ...
随机推荐
- State模式学习笔记
选用了一个假设需要用户验证的例子进行State模式学习,这个例子并不恰当.无所谓了,只要能学习到其中的内容即可. 适用性: 1,一个对象的行为取决于他的状态,并且它必须在运行时刻依据状态改变他的行为. ...
- Win10《芒果TV》商店版更新v3.4.0:率先支持创意者画中画,工作娱乐两不误
在Win10创新者更新中,微软为Windows10 PC系统添加了UWP应用窗口置顶功能(亦称画中画功能),Win10版<芒果TV>更新v3.4.0,率先宣布支持画中画新特性,为广大用户带 ...
- java多线程基本概述(四)——死锁
package mytask; public class Task { public static void main(String[] args) { DeadThread thread = new ...
- 读《effective C++》1
条款一:视C++为一个语言联邦 学习C++半个月了,学了他的面向过程编程,面向对象编程(封装性,继承性,多态性),template泛型编程,开始只是觉得C++基础是面向对象,但是学了这么多块开始有点迷 ...
- C++ 窗口可改风格
SetWindowLong(m_hWnd,GWL_STYLE,::GetWindowLong(m_hWnd,GWL_STYLE)& ~WS_MAXIMIZEBOX);//去掉最大化 GWL_S ...
- phpcms基础
CSM基础(做中小型企业网站) 做一个企业站,三个页面比较重要1.首页2.列表页3.内容页 做企业站的流程:1.由美工出一张,设计效果图2.将设计图静态化3.开始安装CMS4.强模板文件放到CSM里面 ...
- 2017-4-26 winform 菜单和工具栏
如何让radiobutton进行分组: 用Panel 相当于div 菜单和工具栏: MenuStrip(菜单条) ShortcutKeys-------------------------与菜单 ...
- 用户登录(Material Design + Data-Binding + MVP架构模式)实现
转载请注明出处: http://www.cnblogs.com/cnwutianhao/p/6772759.html MVP架构模式 大家都不陌生,Google 也给出过相应的参考 Sample, 但 ...
- 蓝桥杯-立方尾不变-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- 编写一个简单的java服务器程序
import java.net.*;import java.io.*; public class server{ ); //监听在80端口 Socket sock = server.accept(); ...