利用jQuery实现粘性滚动导航栏



52 206 69



特效描述:利用jQuery实现 粘性滚动 导航栏,利用jQuery实现粘性滚动导航栏

代码结构

1. 引入CSS

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<link href="css/demo.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<link href="css/demo.css" rel="stylesheet" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smint.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smint.js"></script>

3. HTML代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1 user-scalable=no">
<script type="text/javascript">
$(document).ready( function() {
    $('.subMenu').smint({
    	'scrollSpeed' : 1000
    });
});
</script>
</head>
<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>
<div style="text-align:center;clear:both"><br>
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 二级导航菜单 滚动切换 下拉导航菜单 图片滚动 竖直导航菜单 文字滚动 图标导航菜单 固定导航菜单 图片文字滚动 侧边导航菜单 全屏滚动 树形导航菜单 页面滚动 网址导航菜单 导航菜单插件 文字导航菜单 滚动流动 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 自动滚动图片轮播 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到