首页 web前端 js教程 jQuery.Pin垂直滚动时固定导航实例分享

jQuery.Pin垂直滚动时固定导航实例分享

Jan 10, 2018 pm 01:48 PM
固定 导航

ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击。本文主要为大家详细介绍了使用jQuery.Pin垂直滚动时固定导航的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助大家。

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实现固定导航栏效果

怎么固定导航栏_html/css_WEB-ITnose

jQuery实现仿百度帖吧头部固定导航效果_jquery

以上是jQuery.Pin垂直滚动时固定导航实例分享的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何设置固定不更换的电脑锁屏壁纸 如何设置固定不更换的电脑锁屏壁纸 Jan 17, 2024 pm 03:24 PM

一般来说,计算机的桌面背景图案是可以由使用者自行调节的。然而,对于部分Windows10用户而言,他们希望能够固定电脑桌面背景图片,但却不知该如何设定。实际上,操作起来十分简便易行。电脑锁屏壁纸怎样固定不换动1、把你要设置的图片右键选择设置成背景图片2、win+R打开运行,然后输入“gpedit.msc”3、依次展开到:用户配置-管理模板-控制面板-个性化4、点击个性化,再选择“阻止更改桌面背景”5、选择已启用6、之后再打开设置进入到背景,看到这些小字就说明已经设置好了。

将VirtualBox固定磁盘转换为动态磁盘,反之亦然 将VirtualBox固定磁盘转换为动态磁盘,反之亦然 Mar 25, 2024 am 09:36 AM

在创建虚拟机时,系统会要求您选择磁盘类型,您可以选择固定磁盘或动态磁盘。如果您选择了固定磁盘,后来意识到需要动态磁盘,或者相反,该怎么办?好!你可以把一种转换成另一种。在这篇文章中,我们将看到如何将VirtualBox固定磁盘转换为动态磁盘,反之亦然。动态磁盘是一种虚拟硬盘,它最初具有较小的大小,随着您在虚拟机中存储数据,其大小会相应增长。动态磁盘在节省存储空间方面非常高效,因为它们只占用所需的主机存储空间。然而,随着磁盘容量的扩展,可能会稍微影响计算机的性能。固定磁盘和动态磁盘是虚拟机中常用的

如何在 Windows 11 中始终保持小部件面板可见 如何在 Windows 11 中始终保持小部件面板可见 Aug 13, 2023 pm 07:13 PM

如何始终显示小部件板在Windows11中打开?好吧,您可以从下载并安装最新的Windows更新开始。在预览体验计划的最新更新补丁中,Microsoft透露,开发和金丝雀频道中的用户将能够将小部件板固定为打开状态,因此小部件板始终只需一目了然。如何始终显示小部件板在Windows11中打开根据Microsoft,要将板子固定打开,只需单击板右上角的图钉图标即可。一旦您的板被固定打开,小部件板将不再轻视关闭。固定板时,您仍可以通过以下方法将其关闭:通过任务栏上的“小部件”按钮打开小部件板。当小部件

足球导航语音包在哪个导航软件 足球导航语音包在哪个导航软件 Nov 09, 2022 pm 04:33 PM

足球导航语音包在“高德导航”软件中,是高德地图车机版导航语音包的其中一种,内容为黄健翔足球解说版本的导航语音。设置方法:1、打开高德地图软件;2、点击进入“更多工具”-“导航语音”选项;3、找到“黄健翔热血语音”,点击“下载”;4、在弹出的页面,点击“使用语音”即可。

导航地图上横着的8字是什么 导航地图上横着的8字是什么 Jun 27, 2023 am 11:43 AM

导航地图上横着的8字是霾,中度是黄色8预警信号,重度是橙色8预警信号。

百度地图 App 最新版本 18.8.0 发布,首次引入红绿灯雷达功能,并新增实时停车推荐功能 百度地图 App 最新版本 18.8.0 发布,首次引入红绿灯雷达功能,并新增实时停车推荐功能 Aug 06, 2023 pm 06:05 PM

百度地图App安卓版/iOS版均已发布18.8.0版本,首次引入红绿灯雷达功能,业内领先据官方介绍,开启红绿灯雷达后,支持开车自动探测红绿灯,不用输入目的地,北斗高精可以实时定位,全国100万+红绿灯自动触发绿波提醒。除此之外,新功能还提供全程静音导航,使图区更简洁,关键信息一目了然,且无语音播报,使驾驶员更加专注驾驶百度地图于2020年10月上线红绿灯倒计时功能,支持实时读秒预判,导航会在接近红绿灯路口时,自动展示倒计时剩余秒数,让用户时刻掌握前方路况。截至2022年12月31日,红绿灯倒计时

电脑便签怎么固定在桌面 电脑便签怎么固定在桌面 Feb 15, 2024 pm 04:00 PM

Windows10操作系统预先植入了便捷的便笺功能,以便尊贵的用户能随心所欲地撰写临时记事或信息。假设阁下期望以此为工具,快速且轻松找到并使用便签,抑或是希望将这个实用的小程序固定在宽大的屏幕中央以方便查阅,只需简单几步即可实现以上愿望:电脑便签怎么固定在桌面1、点击开始再点击这里的便签2、打开以后便签就可以直接在这里输入对应的内容了,而且也可以点击上面的加号来添加一个全新的内容3、如果你想要用第三方的便签软件的话那么可以进入到对应的软件的设置里面来操作。

高德地图推出升级版驾车 ETA 服务:实时解析当前路况,预估到达时间更精准 高德地图推出升级版驾车 ETA 服务:实时解析当前路况,预估到达时间更精准 Apr 30, 2024 am 08:37 AM

本站4月29日消息,高德地图官宣推出升级版的驾车ETA(本站注:ETA即预估到达时间,指的是用户在当前时刻出发按照给定路线前往目的地预计需要的时长)服务,该服务旨在帮助用户的路线规划时长和路况预估更为精准,辅助用户进行出行决策。该地图应用是最新升级的高德地图App,引入了“超大规模图卷积神经网络模型”,该模型可以更好地捕捉和学习交通流动规律,支持城市道路网络、高速公路系统,能以高精度刻画交通状况的时空动态变化。在此外,全新版本的地图还进一步融合了iTransformer时序预测模型,支持实时解析

See all articles