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

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-2618】凸多边形 计算几何 + 半平面交 + 增量法 + 三角剖分

    2618: [Cqoi2006]凸多边形 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 959  Solved: 489[Submit][Status] ...

  2. Input path does not exist: file:/.......

    注意看是file不存在并不是hdfs,好奇怪,突然明白应该是路径不对,必须加上hdfs://hostname:port/file. 我为什么饭这样的错误是因为前一阵谢了HDFS的曹组,谢了全局File ...

  3. Linux中/etc/hosts文件总是被自动修改

    关闭NetworkManager服务即可. 临时关闭: service  NetworkManager stop 永久关闭: chkconfig NetworkManager off 在centos6 ...

  4. Jenkins配置MSBuild时使用环境变量

    [MSBuild Plugin]插件在使用环境变量有个很奇葩的方式,比如我们通常在Windows的节点机器上,使用WORKSPACE环境变量时,批处理应该这样写%WORKSPACE%,而有时插件确不能 ...

  5. Java Attach API

    catalog . instrucment与Attach API . BTrace: VM Attach的两种方式 . Sun JVM Attach API 1. instrucment与Attach ...

  6. 浅析基本AI五子棋算法

    五子棋是所有棋类博弈中比较简单的了,这里介绍的也只是一种非常基本的AI策略.其实,包括之前的AI贪吃蛇,感觉这两个AI其实体现的都是一种建模思想,把一个现实中的问题模型化,抽象化,得到其一般特征,再设 ...

  7. 通过System.getProperties()获取系统参数

    Properties props=System.getProperties(); //系统属性    System.out.println("Java的运行环境版本:"+props ...

  8. 网站缓存数据到tomcat服务器

    通过缓存使相同的数据不用重复加载,降低数据库的访问 public class CacheFilter implements Filter { //实例变量[每线程共享] private Map< ...

  9. IOS VFL屏幕自适应

    -(void)fun1{ //注意使用VFL,不用设置视图的frame UIView *view = [[UIView alloc] init]; view.backgroundColor = [UI ...

  10. PHP中静态与抽象的概念

    静态//普通成员//普通成员是属于对象的 //静态成员//静态成员属于类的 类中的静态属性非常类似于函数的全局变量.类中的静态成员是不需要对象而使用类名来直接访问的. //关键字:static//se ...