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

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. The user operation is waiting for "Building workspace" to complete

    1.选择菜单栏的“Project”,然后把菜单栏中“Build Automatically”前面的对钩去掉. 2.当你修改或添加代码后,选择菜单栏的“Project”,然后选择菜单栏中“Build A ...

  2. codeforces 723E：One-Way Reform

    Description There are n cities and m two-way roads in Berland, each road connects two cities. It is ...

  3. Gulp解决发布线上文件(CSS和JS)缓存问题

    Gulp解决发布线上文件(CSS和JS)缓存问题 本文的缘由:目前经常线上发布文件后要不断的刷新页面及过很长时间,页面上的CSS和JS文件才能生效,特别对于目前做微信商城的时候,微信内置的浏览器缓存非 ...

  4. Cacti /graphs_new.php SQL Injection Vulnerability

    catalogue . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 other SQL injection vulnerability ...

  5. Java JVM、JNI、Native Function Interface、Create New Process Native Function API Analysis

    目录 . JAVA JVM . Java JNI: Java Native Interface . Java Create New Process Native Function API Analys ...

  6. 加州大学伯克利分校Stat2.3x Inference 统计推断学习笔记: Section 2 Testing Statistical Hypotheses

    Stat2.3x Inference(统计推断)课程由加州大学伯克利分校(University of California, Berkeley)于2014年在edX平台讲授. PDF笔记下载(Acad ...

  7. AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle

    这几个都关于样式及类名修改的,所以先把样式代码贴上吧. .red{color:red} .blue{color:blue} 写案例用到的样式就这么简单的两个,下面进入正题. ngClass ngCla ...

  8. CentOs安装Scrapy出现error: Setup script exited with error: command ‘gcc’ failed with exit status 1错误解决方案

    按照 http://www.1207.me/archives/209.html 的教程安装Scrapy出现了上述错误,但是本身机器已经有了gcc,所以应该是安装包的问题 百度又看到了同博客里的解决方案 ...

  9. C# 开源项目一

    商业协作和项目管理平台-TeamLab 网络视频会议软件-VMukti 驰骋工作流程引擎-ccflow [免费]正则表达式测试工具-Regex-Tester Windows-Phone-7-SDK E ...

  10. 【Alpha版本】冲刺-Day4

    队伍:606notconnected 会议时间:11月12日 会议总结 张斯巍(433) 今天安排:图片查看界面设计 完成度:40% 明天计划:设置界面设计 遇到的问题:校运会比赛时间不够 感想:因为 ...