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

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. 【BZOJ-1952】城市规划 [坑题] 仙人掌DP + 最大点权独立集（改）

    1952: [Sdoi2010]城市规划 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 73  Solved: 23[Submit][Status][ ...

  2. Visual Studio插件

    不定时更新,得到最好用的插件.(友情提示:安装插件时最好先备份系统) 1.Resharper 10.0.0.12.VS10x CodeMAP3.JavaScript Map Parser4.JScri ...

  3. hdu 1558 线段相交+并查集

    题意:要求相交的线段都要塞进同一个集合里 sol:并查集+判断线段相交即可.n很小所以n^2就可以水过 #include <iostream> #include <cmath> ...

  4. fzuoop期中练习

    5-1 科学计数法的值 科学计数法是一种数学专用术语.将一个数表示成 a×10的n次幂的形式,其中1≤|a|<10,n为整数,这种记数方法叫科学计数法.例如920000可以表示为9.2*10^5 ...

  5. [Android]ListFragment.setEmptyText() 抛 java.lang.IllegalStateException

    在ListFragment子类中直接调用setEmptyText(getString(R.string.msg_no_invited_parties)), 抛java.lang.IllegalStat ...

  6. Java 代码性能优化总结

    前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用, ...

  7. hdu 2037 - 今年暑假不AC（区间调度问题）

    题意:区间调度问题 解法:应用贪心算法,贪心的规则: 在可选的节目中,选取结束时间早的节目. 1: #include<stdlib.h> 2: #include<string.h&g ...

  8. Python基本数据类型之str

    一.创建 s = "morra" s = str("morra") #str()这种方法会自动找到str类里的_init_方法去执行 ------------- ...

  9. shell 中 &&和||的方法

    Shell && 和 || shell 在执行某个命令的时候,会返回一个返回值,该返回值保存在 shell 变量 $? 中.当 $? == 0 时,表示执行成功:当 $? == 1 时 ...

  10. JavaWeb---总结（三）Tomcat服务器学习和使用(一)

    一.Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的server.xml文件是配置的核心文件. 如果想修改Tomcat服务器的启动端口,则可以在server.xml ...