jQuery粘性跟随滚动条滚动的导航栏源代码下载

作者:网页模板
大小:0.005MB
点击次数:3494
发布时间:2014-03-07 12:55
分享到:0

特效介绍


jQuery粘性跟随滚动条滚动的导航栏源代码下载,不兼容IE6。点击导航栏不同的按钮,滑动到不同的内容。滚动条滚动,导航栏会自始至终保持在浏览器可是区域的最顶端。

使用方法

第一步、在head区域引入下面的css样式:

01 <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"rel="stylesheet" type="text/css">
02 <link href="css/demo.css" rel="stylesheet" type="text/css">
03 <script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
04 <script type="text/javascript" src="js/jquery.smint.js"></script>
05 <script type="text/javascript">
06 $(document).ready( function() {
07     $('.subMenu').smint({
08         'scrollSpeed' : 1000
09     });
10 });
11 </script>

参数'scrollSpeed' : 1000  设置滚动时间,单位毫秒
第二步、在body区域引入下面的代码:

01 <div class="wrap">
02     <div class="subMenu">
03         <div class="inner">
04             <a href="#" id="sTop" class="subNavBtn">Home</a>
05             <a href="#" id="s1" class="subNavBtn">Section 1</a>
06             <a href="#" id="s2" class="subNavBtn">Section 2</a>
07             <a href="#" id="s3" class="subNavBtn">Section 3</a>
08             <a href="#" id="s4" class="subNavBtn">Section 4</a>
09             <a href="#" id="s5" class="subNavBtn end">Section 5</a>
10         </div>
11     </div>
12     <div class="section sTop">
13         <div class="inner">
14         </div>
15         <br class="clear">
16     </div>
17     <div class="section s1">
18         <div class="inner">
19             <h1>Section 1</h1>
20         </div>
21     </div>
22     <div class="section s2">
23         <div class="inner">
24             <h1>Section 2</h1>
25         </div>
26     </div>
27     <div class="section s3">
28         <div class="inner">
29             <h1>Section 3</h1>
30         </div>
31     </div>
32     <div class="section s4">
33         <div class="inner">
34             <h1>Section 4</h1>
35         </div>
36     </div>
37     <div class="section s5">
38         <div class="inner">
39             <h1>Section 5</h1>
40         </div>
41     </div>
42 </div>

jQuery粘性跟随滚动条滚动的导航栏源代码下载的更多相关文章

  1. 如何用jQuery实现在鼠标滚动后导航栏保持固定

    要实现如下效果,鼠标滚动后,上方导航栏置顶固定 关键html代码: <div class="header-bottom"> <div class="co ...

  2. 【分享】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  3. 【方法】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  4. 原生js实现随着滚动条滚动,导航会自动切换的效果

    最近学习前端,把前面用原生js写的一段有关tab切换效果的代码贴上,实现的效果比较简陋,请大家见谅 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  5. jQuery系列(七):导航栏实例

    上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  6. jQuery 图片随滚动条滚动加载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery判断页面滚动条滚动方向

    废话不多说,直接上代码 $(window).scroll(function(){ var before = $(window).scrollTop(); $(window).scroll(functi ...

  8. jQuery背景跟随鼠标移动的网页导航

    首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search     首页 PSD模板 CSS模板 特效插件 ...

  9. jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...

随机推荐

  1. Composer的使用

    安装 curl -sS https://getcomposer.org/installer | php 你可以使用--install-dir选项将Composer安装到指定的目录,例如: curl - ...

  2. maven+springmvc+easyui+fastjson+pagehelper

    1.maven配置 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  3. 红外遥控系统原理及单片机软件解码程序,我的编写经历(C版本)

    应该说现在每一块开发板都带有红外模块,并且大都配置了相应的程序.但其实自己动手写解码程序,更能锻炼自己所学,且不谈程序写的如何,这个过程中肯定是受益良多的.现在我就把我花一下午写出的解码程序与大家分享 ...

  4. 什么是JS事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...

  5. Android(digest)

    Android开发者文档这么说的: Content providers manage access to a structured set of data. They encapsulate the ...

  6. jquery $ dollar符号用法总结

    参考:https://github.com/chyingp/blog/blob/master/jquery/jQuery%E6%BA%90%E7%A0%81-%E7%BE%8E%E5%85%83$%E ...

  7. OSCHina技术导向:Java全文搜索框架Lucene

    Lucene 是apache软件基金会一个开放源代码的全文检索引擎工具包,是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎,部分文本分析引擎.Lucene的目的是为软件开发人员提供一个简单易用 ...

  8. alternaiate terms

    操作系统就是能让您的计算机工作 的一系列基本程序和实用工具; 大多数的软件至少都要卖几百块钱,您们怎么愿意白白把它送给别人? 您真正应该问的问题是软件公司怎么可以要您花那么多钱买他们的软件.写软件和制 ...

  9. Hibernate + MySQL中文乱码问题

    如果持久化的类中有包括了汉字的String对象,那么对应到数据库中汉字的部分就会是乱码.这主要是由于MySQL数据表的字符集与我们当前使用的本地字符集不相同造成的. 如果是windows系统,那么系统 ...

  10. C#中的反射原理及应用(转)

    反射的概述 反射的定义:审查元数据并收集关于它的类型信息的能力.元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等, ...