您的位置：首页 > 编程技术 > js  >  使用jQuery.Pin垂直滚动时固定导航

使用jQuery.Pin垂直滚动时固定导航

 更新时间：2017年5月27日 10:00  点击：2893

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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[!--infotagslink--]

相关文章

  • js实现文字垂直滚动和鼠标悬停效果

    这篇文章主要介绍了js实现文字垂直滚动和鼠标悬停效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-01-05

  • 使用jQuery.Pin垂直滚动时固定导航

    这篇文章主要为大家详细介绍了使用jQuery.Pin垂直滚动时固定导航的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-27

  • JS实现图片的不间断连续滚动的简单实例

    下面小编就为大家带来一篇JS实现图片的不间断连续滚动的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-06-12

  • javascript实现平滑无缝滚动

    这篇文章主要为大家详细介绍了javascript实现平滑无缝滚动的具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-05-09

  • jQuery实现模仿微博下拉滚动条加载数据效果

    这篇文章主要介绍了jQuery实现模仿微博下拉滚动条加载数据效果,涉及jQuery响应下拉滚动事件动态操作页面元素的技巧,需要的朋友可以参考下...2015-12-27

  • JS平滑无缝滚动效果的实现代码

    下面小编就为大家带来一篇JS平滑无缝滚动效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考...2016-05-09

  • 原生js实现类似fullpage的单页/全屏滚动

    这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法，文中给出了完整的实例代码，相信对大家的理解和学习具有一定的参考价值，需要的朋友们可以参考借鉴，下面来一起看看吧。...2017-01-26

  • Javascript实现信息滚动效果

    这篇文章主要为大家详细介绍了Javascript实现信息滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-22

  • javascript实现无缝上下滚动特效

    这篇文章主要介绍了javascript实现无缝上下滚动特效的相关资料,需要的朋友可以参考下...2015-12-18

  • fullPage.js和CSS3实现全屏滚动效果

    这篇文章主要为大家详细介绍了fullPage.js和CSS3实现全屏滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-09

  • DIV随滚动条滚动而滚动的实现代码【推荐】

    下面小编就为大家带来一篇DIV随滚动条滚动而滚动实现代码【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-04-16

  • js将滚动条滚动到指定位置的简单实现方法

    下面小编就为大家带来一篇js将滚动条滚动到指定位置的简单实现方法。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-07-01

  • jQuery实现网页顶部固定导航效果代码

    这篇文章主要介绍了jQuery实现网页顶部固定导航效果代码,涉及jQuery响应scroll事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下...2015-12-25

  • jquery跟随屏幕滚动效果的实现代码

    下面小编就为大家带来一篇jquery跟随屏幕滚动效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-04-16

  • 移动端web滚动分页的实现方法

    这篇文章主要为大家详细介绍了移动端web滚动分页的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-09

  • jQuery视差滚动效果网页实现方法经验总结

    这篇文章主要介绍了jQuery视差滚动效果网页实现方法,结合实例形式总结分析了jQuery滚动效果的实现步骤、操作技巧及相关注意事项,需要的朋友可以参考下...2016-10-02

  • JavaScript实现无穷滚动加载数据

    这篇文章主要为大家详细介绍了JavaScript实现无穷滚动加载数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-09

  • javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

    这篇文章主要介绍了javascript实现图片左右滚动效果,可实现自动滚动,带有左右按钮功能,基于插件scrollPic.js实现,附带了相应的demo源码供读者下载参考,需要的朋友可以参考下...2016-10-03

  • jQuery滚动新闻实现代码

    这篇文章主要为大家详细介绍了jQuery滚动新闻实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-07-01

  • jQuery动画效果实现图片无缝连续滚动

    这篇文章主要为大家介绍了jQuery动画效果实现图片无缝连续滚动，实现类似连续不间断的滚动广告位，感兴趣的小伙伴们可以参考一下...2016-01-14