导航菜单：jQuery粘性滚动导航栏效果

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

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

兼容性

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

引入文件

<link href="css/demo.css" rel="stylesheet" type="text/css"><script src="js/jquery.min.js"></script>
<script src="js/jquery.smint.js"></script>

HTML

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<div class="wrap"><div class="subMenu"><div class="inner"><a href="#" id="sTop" class="subNavBtn">Home</a><a href="#" id="s1" class="subNavBtn">Section 1</a><a href="#" id="s2" class="subNavBtn">Section 2</a><a href="#" id="s3" class="subNavBtn">Section 3</a><a href="#" id="s4" class="subNavBtn">Section 4</a><a href="#" id="s5" class="subNavBtn end">Section 5</a></div></div><div class="section sTop"><div class="inner"></div><br class="clear"></div><div class="section s1"><div class="inner"><h1>Section 1</h1></div></div><div class="section s2"><div class="inner"><h1>Section 2</h1></div></div><div class="section s3"><div class="inner"><h1>Section 3</h1></div></div><div class="section s4"><div class="inner"><h1>Section 4</h1></div></div><div class="section s5"><div class="inner"><h1>Section 5</h1></div></div>
</div>
</body>

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

JavaScript

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

下载源码

导航菜单：jQuery粘性滚动导航栏效果相关推荐

html左边多级菜单导航栏,精美的多级侧边栏导航菜单jQuery插件
这是一款基于bootstrap的精美多级侧边栏导航菜单jQuery插件.该导航菜单在bootstrap样式的基础上,通过jQuery来为导航菜单绑定菜单点击事件,生成非常漂亮的多级侧边栏导航菜单. 使 ...
无限级导航PHP,jQuery多级无限级导航下拉菜单代码
jQuery多级无限级导航下拉菜单代码 js代码 $(document).ready(function() { $("ul.nav li").hover(function(){ $ ...
wpf 导航菜单_WPF：精简导航菜单
wpf 导航菜单介绍 (Introduction) Navigation menus can enhance the quality of the user experience of your W ...
楼梯式导航 html,jQuery仿京东商城楼梯式导航定位菜单|jquery网站楼层导航
jQuery京东浮动网站楼层导航代码是一款仿京东商城网页左侧浮动楼层导航特效代码.具有一定的参考价值,感兴趣的小伙伴们可以参考一下. CSS样式如下: *{ margin:0; padding:0; ...
美观的导航菜单 -- JQuery实现，支持横向，竖向
free-css-drop-down-menu 可以到 http://lwis.net/free-css-drop-down-menu/dropdown.simple.vertical.html 这 ...
html炫酷的导航栏效果,纯CSS3创意导航菜单特效
这是一款非常有创意的纯CSS3导航菜单特效.该导航菜单主要通过CSS3 transform和transition方法实现效果,非常简单.该特效由進擊的燊提供. 使用方法 HTML结构该导航菜单使用一 ...
html纵向固定导航菜单代码,jQuery和css3响应式垂直固定导航菜单插件
这是一款非常实用的jQuery和css3响应式垂直固定导航菜单插件.当你的页面上有很多的内容,用户需要花费大量的时间才能找到他们想要的内容.这个垂直固定导航菜单插件能够为页面提供一个内容预览,使用户能 ...
一款基jquery超炫的动画导航菜单
今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览 ...
HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法在页面中引入jquery和TweenMax.js的 ...

导航菜单：jQuery粘性滚动导航栏效果

兼容性

引入文件

JavaScript

导航菜单：jQuery粘性滚动导航栏效果相关推荐

最新文章

热门文章