jQuery页面向下滚动导航固定特效代码下载



27 105 36



特效描述:页面向下滚动 导航固定,jQuery页面向下滚动导航固定特效代码下载

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/index.css" >

2. 引入JS

<script src="js/jquery-1.11.3.min.js"></script>

3. HTML代码

<div id="nav-wrap" style="height:1900px;background:#FC0;margin-top:40px;position:relative;">
	<ul id="nav" style="height:60px;background:#0F9;top:300px;position:absolute;width:100%;">
		<li>导航栏项目一</li>
		<li>导航栏项目二</li>
		<li>导航栏项目三</li>
		<li>导航栏项目四</li>
		<li>导航栏项目五</li>
	</ul>
	<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><br><br><br>
	</div>
</div>
<script>
$(function(){
	var a = $('#nav'),
		b =a.offset();
	$(document).on('scroll',function(){
		var	c = $(document).scrollTop();
		if(b.top<=c){
			a.css({'position':'fixed','top':'0px'})
			}else{
				a.css({'position':'absolute','top':'300px'})
				}
		})
	})
</script>



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


热门标签: 顶部悬浮 底部悬浮 滚动导航菜单 浮动导航菜单 滚动切换 图片广告 图片滚动 对联广告 文字滚动 叠加浮动层 图片文字滚动 全屏滚动 页面滚动 滚动流动 悬浮浮动漂浮 自动滚动图片轮播 浮动提示框

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

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

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