求助，请大家帮忙看看。。
本帖最后由 iyangquan 于 2013-11-14 12:20:06 编辑
<!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=utf-8" />
<title>页面滚动效果</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#B6CDFC;}
#main{width:800px;min-height:600px;margin:30px auto 0 auto;background:#fff;-moz-border-radius:12px;-khtml-border-radius: 12px;-webkit-border-radius:12px;border-radius:12px;}
/* nav */
.nav{width:50px;position:fixed;top:5%;z-index:1999;background:#f0f0f0;border:1px solid #ccc;margin:10% 0 0 0;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);
}
*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
*html .nav{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
.nav li{height:50px; line-height:50px; border-bottom:1px solid #d3d3d3; background:url(img/icon.png) no-repeat; text-align:center; cursor:pointer}
.nav li:hover{background-color:#f9f9f9; text-decoration:none}
.nav li:last-child{border-bottom:none}
.nav li.cur{background-color:#ffc}
.nav li.pro{background-position:0 0}
.nav li.news{background-position:0 -55px}
.nav li.ser{background-position:0 -105px}
.nav li.con{background-position:0 -155px}
.nav li.job{background-position:0 -207px}
/* box */
.box{height:700px; margin: 0 10px}
.box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px}
.box p{line-height:30px; margin:20px; text-align:center; font-size:28px}
.box p span{margin:10px}
#pro,#ser{background:url(img/bg.jpg)}
#news,#con{background:url(img/bg2.gif)}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript">
$(function(){
var pro_top = $("#pro").offset().top;
var news_top = $("#news").offset().top;
var ser_top = $("#ser").offset().top;
var con_top = $("#con").offset().top;
var job_top = $("#job").offset().top;
//alert(tops);
$(window).scroll(function(){
var scroH = $(this).scrollTop();
if(scroH>=job_top){
set_cur(".job");
}else if(scroH>=con_top){
set_cur(".con");
}else if(scroH>=ser_top){
set_cur(".ser");
}else if(scroH>=news_top){
set_cur(".news");
}else if(scroH>=pro_top){
set_cur(".pro");
}
var s = $(document).scrollTop();
if(s > t - 10){
$('.leftFix').css('position','fixed');
if(s + fh > mh){
$('.leftFix').css('top',mh-s-fh+'px');
}
}else{
$('.leftFix').css('position','');
}
});
$(".nav li").click(function() {
var el = $(this).attr('class');
$('html, body').animate({
scrollTop: $("#"+el).offset().top
},{
easing: 'easeOutSine',
duration: 300,
complete:function(){
}
});
});
});
function set_cur(n){
if($(".nav li").hasClass("cur")){
$(".nav li").removeClass("cur");
}
$(".nav li"+n).addClass("cur");
}
</script>
</head>
<body>
<div style="height:300px;overflow:hidden;background:#ccc;"></div>
<div style="width:980px;margin:auto;">
<ul class="nav">
<li class="pro"></li>
<li class="news"></li>
<li class="ser"></li>
<li class="con"></li>
<li class="job"></li>
</ul>
<div id="main">
<div id="pro" class="box">
<h3>产品展示</h3>
</div>
<div id="news" class="box">
<h3>新闻中心</h3>
</div>
<div id="ser" class="box">
<h3>服务支持</h3>
</div>
<div id="con" class="box">
<h3>联系我们</h3>
</div>
<div id="job" class="box">
<h3>人才招聘</h3>
</div>
</div>
</div>
<div style="height:1000px;overflow:hidden;background:#ccc;"></div>
</body>
</html>
