jquery右侧固定区块特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery右侧固定区块特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery右侧固定区块</title>
<link type="text/css" href="css/zzsc.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<div class="box">
	<!--代码开始-->
	<div class="main"></div>
	<div class="sub">
		<div class="sub01"></div>
		<div class="sub01"></div>
		<div class="fixed">我是固定的哟</div>		
	</div>
	<!--代码结束-->
</div>
</body>
</html>

JS代码(js.js):

$(document).ready(function(e){
	t = $('.fixed').offset().top;
	mh = $('.main').height();
	fh = $('.fixed').height();
	$(window).scroll(function(e){
	s = $(document).scrollTop();
	if(s > t - 10){
	$('.fixed').css('position','fixed');
	if(s + fh > mh){
	$('.fixed').css('top',mh-s-fh+'px');
}
}
else{
	$('.fixed').css('position','');
}
}
)}
);

CSS代码(zzsc.css):

*{padding:0px;margin:0px;}
.box{width:1000px;background:#ccc;margin:0 auto;overflow:hidden;}
.main{width:770px;height:2000px;background:#000;float:left;}
.sub{width:220px;background:#FC6;float:right;}
.sub01{width:220px;height:100px;background:#0CC;margin-bottom:10px;}
.fixed{width:220px;height:300px;background:#F66;font:normal 13px/30px \5FAE\8F6F\96C5\9ED1;text-align:center;top:10px;}

附件:下载该文件资源,减少时间成本(增值服务)