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

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. Ajax请求接口加密研究（针对网页前端的接口安全加密机制研究）

    通常我们在h5前端调用后台接口时,一般是ajax,那么接口的安全成了一个问题. 这里可以肯定的说,前端调用的接口一定要验证! 然后剖析了微信网页版.京东网页版这些,也都是通过接口的形势绑定数据,所以在 ...

  2. Android成长日记-使用ToggleButton实现灯的开关

    案例演示 此案例实现思路:通过ToggleButton控件,ImageView控件实现 ---xml代码: <!-- textOn:true textOff:falase[s1] --> ...

  3. nginx添加proxy_cache模块做缓存服务器

    业务需求nginx对后端tomcat(静态文件)做缓存 减轻后端服务器的压力 # nginx-1.6.2.tar.gz  ngx_cache_purge-2.3.tar.gz #编译安装 ./conf ...

  4. phpstorm取消自动保存,修改快捷键并标识修改的文件为星星标记

    编辑时间: 2016-8-3 15:15:37 个人通过使用,发现PhpStorm的确是 编辑PHP 的神器,提供用户效率,提供智能代码补全,快速导航以及即时错误检查. 不过,让我用起来不爽的是,它会 ...

  5. 生活中的MVC模式，一个吃货的理解。

    以下是生活中对于MVC模式的领悟,虽然可笑,轻喷. 2015年 8月 26日 M  => Model       模型 我认为叫做模具更好的理解.批量加工生产具有相同特征的东西.        ...

  6. 淘宝npm镜像

    来源:https://cnodejs.org/topic/4f9904f9407edba21468f31e 镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在 ...

  7. cobbler重装、web、定制化

    cobbler重装 根据此文已自动化安装centos 7的版本http://www.cnblogs.com/shhnwangjian/p/5858900.html 在cobbler-test主机上重装 ...

  8. IOS 学习笔记之UI

    自定义控件,实现部分 - (id)initWithFrame:(CGRect)frame descriptionText:(NSArray *)inText/*需要输入两个字符串*/ { self = ...

  9. 如何在Flash Builder里新建ActionScript工程

    新建ActionScript工程 1. File > New > ActionScript Project 2. 按照提示完成工程的创建 使程序直接在Flash Player中运行 1. ...

  10. 集成ShareSDK里报错NSConcreteMutableData wbsdk_base64EncodedString]

    百度一大堆都说在这个里加个-ObjC,然后加了还是有问题 最近谷歌了下才要加入这个才正常了,国内的开发者只是一知半解的…………