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. 由EmbeddedFileProvider构建的内嵌(资源)文件系统

    由EmbeddedFileProvider构建的内嵌(资源)文件系统 一个物理文件可以直接作为资源内嵌到编译生成的程序集中.借助于EmbeddedFileProvider,我们可以统一的编程方式来读取 ...

  2. VS调试时监视上一个错误代码和错误的文本描述

    以前我都是用GetLastError()然后在MSDN里面查错误原因的.现在才知道有很简便的方法: 在Watch窗口选择一行,然后输入$err,hr

  3. PyCharm设置字体

    pycharm 是很好的一个IDE,就是默认字体太小了,真的太小了,改字体的地方很隐晦.找了半天,贴图: 然后发现size 不能更改,所以,点击save as创建一个方案,然后修改自己的方案.这个时候 ...

  4. Linux系统安装VM-Tools

    安装 vmware-tools的安装包有两个,一个是rpm包,一个是tar包,下面分别是用了这两种方法安装: 一.rpm包安装 1.在启动LINUX 虚拟机之后,在WMWare 的菜单栏中点击&quo ...

  5. C++ STL中的常用容器浅谈

    STL是C/C++开发中一个非常重要的模板,而其中定义的各种容器也是非常方便我们大家使用.下面,我们就浅谈某些常用的容器.这里我们不涉及容器的基本操作之类,只是要讨论一下各个容器其各自的特点.STL中 ...

  6. ORACLE 表连接详解

    在ORACLE中,表连接方式主要有:内连接,外连接,自连接: 内连接: 这是最常用的连接查询 SELECT * FROM A INNER JOIN B ON A.ID=B.ID SELECT * FR ...

  7. 【十分不错】【离线+树状数组】【TOJ4105】【Lines Counting】

    On the number axis, there are N lines. The two endpoints L and R of each line are integer. Give you ...

  8. taobao面试要点

    第一: 其中有几个点必问,JVMGC深层机制.类加载,包括Tomcat和Jboss的.线程相关的如离线锁,互斥同步,java主线程和工作线程机制,concurrent包下的锁和sync关键字一些区别, ...

  9. HTML5新特性学习-1

    本文在于巩固基础 新特性:音频的使用 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  10. DSOframer 无法正常加载的解决方案

    不了解 DSOframer 的朋友,可以先参考文章 DSOframer 的简单介绍和资源整理. 在使用 DSOframer 时,经常会碰到各种奇奇怪怪的问题,最常见的就是控件不能正常加载.大家可以按下 ...