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

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>