好资源导航 » 文章资讯 » jQuery实现的粘性滚动导航栏效果实例【附源码下载】

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

2023-09-22 23:02:06 47

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

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

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

兼容性

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

引入文件

HTML





Home
Section1
Section2
Section3
Section4
Section5

Section1

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

JavaScript

$(function(){
$('.subMenu').smint({
scrollSpeed:1000
});
});

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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