jQuery实现的粘性滚动导航栏效果实例【附源码下载】

本文实例讲述了jQuery实现的粘性滚动导航栏效果分享给大家供大家参考,具体如下:

粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的:

jQuery的 smint插件,也是一个导航菜单固定插件。当页滚动时,导航菜单会固定在顶部;当点击菜单时,页面会平滑的滚动到对应的区域。

兼容性

由于 smint 使用了 position: fixed,所以它不兼容 IE6。适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

引入文件

rush:xhtml;"> nofollow" rel="stylesheet" type="text/css">

HTML

rush:xhtml;">

Section 1
Section 2
Section 3
Section 4
Section 5

注意:菜单的外部容器(如上例的 subMenu)需要设置样式 position:absolute,并且每个菜单的 a 标签需要设置 id,id 的值与下面对应区域的 class 的值一致。

JavaScript

rush:js;"> $(function() { $('.subMenu').smint({ scrollSpeed : 1000 }); });

附:

完整实例代码点击此处本站下载

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

jQuery导航栏滚动滚动滚动粘性

相关推荐


jQuery表单验证提交:前台验证一(图文+视频)
jQuery表单验证提交:前台验证二(图文+视频)
jQuery如何实时监听获取input输入框的值
JQuery怎么判断元素是否存在
jQuery如何实现定时重定向
jquery如何获取复选框选中的值
jQuery如何清空form表单数据
jQuery怎么删除元素节点
JQuery怎么循环输出数组元素
jquery怎么实现点击刷新当前页面
怎么用jquery实现文字左右展开收缩效果
jquery怎么删除html属性
如何用jquery实现图片翻转效果
jquery怎么删除样式属性
jquery如何获取当前元素的位置
如何用jquery实现点击展开收缩效果
jquery怎么实现点击隐藏显示效果
jQuery如何获取当前页面url
jQuery怎么获取鼠标的位置坐标
简洁易懂的jQuery:HTML表单与jQuery