jQuery粘性跟随滚动条滚动的导航栏源代码下载
- 作者:网页模板
- 大小:0.005MB
- 点击次数:3494
- 发布时间:2014-03-07 12:55
-
特效介绍

jQuery粘性跟随滚动条滚动的导航栏源代码下载,不兼容IE6。点击导航栏不同的按钮,滑动到不同的内容。滚动条滚动,导航栏会自始至终保持在浏览器可是区域的最顶端。
使用方法
第一步、在head区域引入下面的css样式:
02 |
< link href = "css/demo.css" rel = "stylesheet" type = "text/css" > |
04 |
< script type = "text/javascript" src = "js/jquery.smint.js" ></ script > |
05 |
< script type = "text/javascript" > |
06 |
$(document).ready( function() { |
参数'scrollSpeed' : 1000 设置滚动时间,单位毫秒
第二步、在body区域引入下面的代码:
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 > |
12 |
< div class = "section sTop" > |
17 |
< div class = "section s1" > |
22 |
< div class = "section s2" > |
27 |
< div class = "section s3" > |
32 |
< div class = "section s4" > |
37 |
< div class = "section s5" > |
- 如何用jQuery实现在鼠标滚动后导航栏保持固定
要实现如下效果,鼠标滚动后,上方导航栏置顶固定 关键html代码: <div class="header-bottom"> <div class="co ...
- 【分享】纯jQuery实现星巴克官网导航栏效果
前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...
- 【方法】纯jQuery实现星巴克官网导航栏效果
前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...
- 原生js实现随着滚动条滚动,导航会自动切换的效果
最近学习前端,把前面用原生js写的一段有关tab切换效果的代码贴上,实现的效果比较简陋,请大家见谅 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- jQuery系列(七):导航栏实例
上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- jQuery 图片随滚动条滚动加载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery判断页面滚动条滚动方向
废话不多说,直接上代码 $(window).scroll(function(){ var before = $(window).scrollTop(); $(window).scroll(functi ...
- jQuery背景跟随鼠标移动的网页导航
首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search 首页 PSD模板 CSS模板 特效插件 ...
- jquery实现导航栏跟随窗口滚动
最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...
随机推荐
- 由EmbeddedFileProvider构建的内嵌(资源)文件系统
由EmbeddedFileProvider构建的内嵌(资源)文件系统 一个物理文件可以直接作为资源内嵌到编译生成的程序集中.借助于EmbeddedFileProvider,我们可以统一的编程方式来读取 ...
- VS调试时监视上一个错误代码和错误的文本描述
以前我都是用GetLastError()然后在MSDN里面查错误原因的.现在才知道有很简便的方法: 在Watch窗口选择一行,然后输入$err,hr
- PyCharm设置字体
pycharm 是很好的一个IDE,就是默认字体太小了,真的太小了,改字体的地方很隐晦.找了半天,贴图: 然后发现size 不能更改,所以,点击save as创建一个方案,然后修改自己的方案.这个时候 ...
- Linux系统安装VM-Tools
安装 vmware-tools的安装包有两个,一个是rpm包,一个是tar包,下面分别是用了这两种方法安装: 一.rpm包安装 1.在启动LINUX 虚拟机之后,在WMWare 的菜单栏中点击&quo ...
- C++ STL中的常用容器浅谈
STL是C/C++开发中一个非常重要的模板,而其中定义的各种容器也是非常方便我们大家使用.下面,我们就浅谈某些常用的容器.这里我们不涉及容器的基本操作之类,只是要讨论一下各个容器其各自的特点.STL中 ...
- ORACLE 表连接详解
在ORACLE中,表连接方式主要有:内连接,外连接,自连接: 内连接: 这是最常用的连接查询 SELECT * FROM A INNER JOIN B ON A.ID=B.ID SELECT * FR ...
- 【十分不错】【离线+树状数组】【TOJ4105】【Lines Counting】
On the number axis, there are N lines. The two endpoints L and R of each line are integer. Give you ...
- taobao面试要点
第一: 其中有几个点必问,JVMGC深层机制.类加载,包括Tomcat和Jboss的.线程相关的如离线锁,互斥同步,java主线程和工作线程机制,concurrent包下的锁和sync关键字一些区别, ...
- HTML5新特性学习-1
本文在于巩固基础 新特性:音频的使用 <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- DSOframer 无法正常加载的解决方案
不了解 DSOframer 的朋友,可以先参考文章 DSOframer 的简单介绍和资源整理. 在使用 DSOframer 时,经常会碰到各种奇奇怪怪的问题,最常见的就是控件不能正常加载.大家可以按下 ...