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

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粘性滚动导航栏效果的更多相关文章

  1. MDNavBarView下拉导航菜单（仿美团导航下拉菜单）

    说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...

  2. jquery小效果：新浪游戏右侧导航菜单 （页面效果）

    偷盗:新浪游戏右侧导航菜单 http://games.sina.com.cn 效果: 随着页面的滚动,左侧页面的内容,和右侧的导航菜单的按钮文字对应: 点击右侧的导航按钮,左侧页面滚动到相应的内容 2 ...

  3. jQuery实现侧边导航栏效果

    效果图: 效果体验:http://keleyi.com/keleyi/phtml/jqmenu/2.htm 以下是完整代码: <!DOCTYPE html> <html> &l ...

  4. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  5. 一款基jquery超炫的动画导航菜单

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览   ...

  6. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  7. 干货分享！关于APP导航菜单设计你应该了解的一切

    导航菜单是人机交互的最主要的桥梁和平台,主要作用是不让用户迷失方向.现在市面上产品的菜单栏种类繁多,到底什么样的才是优秀的导航菜单设计呢?好的菜单设计不仅能提升整个产品的用户体验,而且还能让用户耳目一 ...

  8. WEB入门.九 导航菜单

    学习内容 水平导航菜单 垂直导航菜单 下拉式导航菜单 能力目标 制作tab标签导航菜单 制作带箭头的导航菜单 制作带信息提示的导航菜单 制作垂直下拉导航菜单 制作水平下拉导航菜单 本章简介 上一章节中 ...

  9. xamarin.Android 实现横向滚动导航

    经过一段时间的练习,自己也做了不少的demo和一些小项目,今天就把这些demo分享给大家,也当做笔记记录到自己的博客中. 这次给大家带来的是HorizontalScrollView实现横向滑动,参考博 ...

随机推荐

  1. ubuntu中maven建的web项目不能将project facet设置为 dynamic web module 3.0

    核心参考:maven 不能设置为web3.0人解决方法 error:Description    Resource    Path    Location    Type Cannot change ...

  2. 系统补丁更新导致MVC3.0.0升级到3.0.1的问题解决

    在更新了系统补丁之后,会不知觉的将MVC3.0.0升级到MVC3.0.1的问题,解决的思路如下: 1.全部MVC引用使用NuGet进行包的管理. 2.单独把MVC库抽离出来,然后放在单独的项目文件夹, ...

  3. HDU 5726 GCD

    传送门 GCD Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem ...

  4. jquery获取复选框的值

    勾选checkbox,并把勾选的值显示在某个div中 <!DOCTYPE html > <html> <head> <meta charset="U ...

  5. Visual Studio 2012环境变量、工作目录、vc++目录、 命令等 的配置和作用

    在调试 Visual Studio 212 程序时,经常有一些动态链接库(即 dll 文件)需要加载到工程里,这样才能依赖第三方库进行程序调试. 这些动态链接库,往往都是测试版本或是开发中的版本,或者 ...

  6. 【Alpha版本】冲刺-Day8

    队伍:606notconnected 会议时间:11月16日 会议总结 张斯巍(433) 今天安排:回收站界面设计 完成度:90% 明天计划:关注界面设计 遇到的问题:无 感想:有时候自己设计的队友说 ...

  7. RBAC权限设计实例

    http://blog.csdn.net/painsonline/article/details/7183629 实现业务系统中的用户权限管理 B/S系统中的权限比C/S中的更显的重要,C/S系统因为 ...

  8. BigDecimal数据加法返回值接收

    1.相加 两个BigDecimal变量a,b. 如果想进行相加,即a加b的话,返回值需要使用a进行接收,如下: a = a.add(b); BigDecimal为不可变类, 所以执行运算的结果需要再返 ...

  9. 利用WireShark进行DNS协议分析

    一.准备工作 系统是Windows 8.1Pro 分析工具是WireShark1.10.8 Stable Version 使用系统Ping命令发送ICMP报文. 二.开始工作 打开CMD.exe键入: ...

  10. Win7、Ubuntu双系统正确卸载Ubuntu系统

    正确的删除ubuntu方法如下: 第1步,修复MBR 1.进入win7,下载个软件MbrFix,放在C:windowssystem32文件夹中 2.点击开始>所有程序>附件>命令提示 ...