使用 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>

 

 

这样就完成了,可以到对应的页面去预览一下效果了。


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362158.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MDK升级后的头文件冲突

////TITLE:// MDK升级后的头文件冲突//AUTHOR:// norains//DATE:// Friday 17-June-2011//Environment:// Keil MDK 4.2// .NET Micro Framework Porting 4.1// 因为在移植的时候&#xff0c;发现了不少MDK编译的一些问题&#xff0c;于是便想升级到最新版本&a…

阻止默认事件

在JS中经常需要阻止元素的默认事件。而阻止默认事件的方法都是使用事件对象的preventDefault()方法或者在函数中return false。在最近一次开发中使用preventDefault()方法的时候遇到一个问题&#xff0c;现在才想/猜明白原因&#xff0c;场景是这样的&#xff1a; <a href&…

MySQL之SQL优化详解(三)

目录 MySQL 之SQL优化详解&#xff08;三&#xff09; 1. 索引优化2. 剖析报告:Show ProfileMySQL 之SQL优化详解&#xff08;三&#xff09; 1. 索引优化 一旦建立索引&#xff0c;select 查询语句的where条件要尽量符合最佳左前缀的原则&#xff0c;如若能做到全值匹配最好。…

行内格式化

相对于熟知的块级格式化上下文&#xff0c;行内格式化上下文更加的复杂难明。行内元素不像块级元素那样直来直去&#xff0c;一个块级元素占据一行&#xff0c;其他块级元素在垂直方向依次向下排列即可。行内元素不同&#xff0c;多个行内元素可以在一行显示&#xff0c;那么&a…

[转载]struts+hibernate遇到的错误总结

原文地址&#xff1a;strutshibernate遇到的错误总结作者&#xff1a;畫上句號经过对strutshibernate几天的学习&#xff0c;大体上还算比较的了解机制&#xff0c;以前学习的时候都是 单个框架训练&#xff0c;没有结合2个框架做&#xff0c;所以今天就找了个网上发布租房信息…

JPA休眠替代方案。 如果JPA或Hibernate对于我的项目而言不够好,该怎么办?

你好&#xff01;你好吗&#xff1f; 今天&#xff0c;我们将讨论不建议使用JPA / Hibernate的情况。 在JPA领域之外&#xff0c;我们还有哪些选择&#xff1f; 我们将谈论的是&#xff1a; JPA /休眠问题 解决一些JPA /休眠问题的方法 选择此处描述的框架的标准 Spring J…

一个Web前端自学者的自述

想来想去还是写下这篇文章&#xff0c;先说明&#xff0c;我精通JAVA编程语言和web前端常见的技术&#xff0c;个人是做JAVA的多&#xff0c;但是更加喜欢前端。因为我从高一开始接触JAVA&#xff0c;家父是黑马的JAVA讲师&#xff0c;自己对编程很热爱&#xff0c;在大学的时候…

css实现web前端最美的loading加载动画!

这些好看的loading效果&#xff0c;你还只会用第三方库吗&#xff1f;CSS3教你实现 ​前言 loading效果在实际开发中是很常见的&#xff0c;尤其是在Ajax请求的时候&#xff0c;可以给用户一个很好的交互体验。 今天这篇文章我们一起来看看如何通过CSS3实现各种不同的loadin…

如何使用Hibernate从Play生成DDL脚本! 框架项目

好的&#xff0c;因此您一直在使用hibernate属性名称“ hibernate.hbm2ddl.auto ” value “ 更新 ”来不断更新数据库架构&#xff0c; 但是现在您需要一个完整的DDL脚本吗&#xff1f; 从您的Global Class onStart中使用此方法来导出DDL脚本。 只需为其提供实体的包名称&…

C# 设计模式,工厂方法

C#工厂方法 1 using System;2 using System.Collections.Generic;3 using System.Linq;4 using System.Text;5 using System.Threading.Tasks;6 7 namespace 工厂方法 {8 class Program {9 static void Main(string[] args) { 10 IFacotry i new Fact…

css3帮你轻松实现圆角效果,不一样的前端页面。

在Web前端页面实现圆角效果&#xff0c;CSS3帮你轻松实现&#xff0c;一个人人皆知的属性 圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一。今天&#xff0c;小编为大家介绍CSS3提供的可以将矩形变为圆角矩形的一个属性 技术等级&#xff1a;中级 | 适…

使用Vysper,TomEE和PrimeFaces将XMPP服务器嵌入JSF Web应用程序内部

我有一个需要在完成某些工作时通知用户的应用程序。 它使用JSF和Primefaces&#xff0c;因此可以使用大气 &#xff08;也称为Push&#xff09;来实现这种通知。 但是另一个有趣的方法是使用嵌入在Java Web应用程序中的XMPP服务器。 好的&#xff0c;好的&#xff0c;您不必嵌…

appium和selenium不同与相同之处

原文来自&#xff1a; https://www.cnblogs.com/zhengshuheng/p/6370398.html selenium是web端的自动化&#xff0c;appium是app端的自动化&#xff0c;它继承了webdriver(也就是selenium 2) 转载于:https://www.cnblogs.com/lv-lxz/p/11118862.html

使用 Visual Studio 编译 wget 为库文件

添加代码与预编译指令与上一篇使用 Visual Studio 编译 wget 为可执行文件一致&#xff0c;区别在于这回建的是静态库工程&#xff08;编译为动态库过程类似:)&#xff09; 从wget的main函数开始读下来&#xff0c;发现问题不少&#xff0c;程序可能基于效率或者编码方便的因素…

webpack中实现按需加载

当页面中一个文件过大并且还不一定用到的时候&#xff0c;我们希望在使用到的时候才开始加载这个文件俗称按需加载。这样可以减少页面的响应时间&#xff0c;提高访问速度。 使用webpack打包的出来的文件要实现以上的要求有两种方式&#xff0c;一个是webpack特有的require.en…

【总结】计算机网络常见问题

1、TCP/IP协议与OSI协议 相互通信的两个计算机系统必须高度协调工作才行&#xff0c;而这种“协调”是相当复杂的。 “分层”可将庞大而复杂的问题&#xff0c;转化为若干较小的局部问题&#xff0c;而这些较小的局部问题就比较易于研究和处理。 计算机网络采用了分层的体系结构…

webpack3的CommonsChunkPlugin插件详解

webpack打出来的包在不做处理的情况下是非常大的&#xff0c;所有依赖都被塞进一个文件中&#xff0c;文件中有业务代码&#xff0c;有业务代码依赖的第三方库代码&#xff0c;还有webpack生成的运行时代码等。这样的一个文件不方便静态资源缓存&#xff0c;并且初始化页面的时…

详细介绍jQuery.outerWidth() 函数具体用法

outerWidth()函数用于设置或返回当前匹配元素的外宽度。外宽度默认包括元素的内边距(padding)、边框(border)&#xff0c;但不包括外边距(margin)部分的宽度。你也可以指定参数为true&#xff0c;以包括外边距(margin)部分的宽度。如下图&#xff1a; 如果你要获取其它情况的宽…

SQLite 入门教程(一)基本控制台(终端)命令

一、基本简介 SQLite 是一个自持的&#xff08;self-contained&#xff09;、无服务器的、零配置的、事务型的关系型数据库引擎。因为他很小&#xff0c;所以也可以作为嵌入式数据库内建在你的应用程序中。SQLite 被应用在 Solaris 10操作系统、Mac OS 操作系统、iPhone 和 Sky…

Web前端开发css基础样式总结

颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间 一般都用16进制表示颜色 单位 1. px像素&#xff08;Pixel&#xff09;。像素,与分辨率…