以下是 jQuery定位滚动导航效果代码 的示例演示效果:
部分效果截图:
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=utf-8" />
<title>jQuery定位滚动导航效果代码</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/inside.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
<div id="advance_banner">为二手车代言</div>
<div class="empty-placeholder hidden"></div>
<div id="subNav">
<ul class="wrap">
<li class="adv_active"><a href="#hall_show" class="adv_door adv_active"><ins></ins>二手车旗舰店<span></span></a></li>
<li><a href="#checkCar" class="adv_source"><ins></ins>车源保证<span></span></a></li>
<li><a href="#alpha_price" class="adv_price"><ins></ins>价格透明<span></span></a></li>
<li><a href="#service_show" class="adv_transfer"><ins></ins>过户便捷<span></span></a></li>
<li><a href="#pay_show" class="adv_payment"><ins></ins>分期付款<span></span></a></li>
<li><a href="#quality_promise" class="adv_promise"><ins></ins>售后质保<span></span></a></li>
</ul>
</div>
<!--hall_show-->
<div id="hall_show" class="wrap">
<div class="show_title">
<h1><span></span>二手车旗舰店</h1>
</div>
<p>国内首家品牌二手车旗舰店，<ins>20000平米展馆</ins>，人性化设计，宽敞的车辆展示空间，360度无死角看车；独立交易室，购车安全感倍增；设有儿童区、免费水吧，让您不只是买卖车辆，更享受星级服务。位于北京市海淀区远大路1号金源购物中心，10号线直达，交通便捷。</p>
<ul class="hallImg_show clearfix">
<li><img alt="大搜车，二手车，展馆，洽谈室" src="images/hall1.jpg" /></li>
<li><img alt="大搜车，二手车，展馆，接待区" src="images/hall2.jpg" /></li>
<li><img alt="大搜车，二手车，展馆，儿童区" src="images/hall3.jpg" /></li>
<li><img alt="大搜车，二手车，展馆，旗舰式展厅" src="images/hall4.jpg" /><ins>国际会展设施 可同时容纳超过700辆车</ins></li>
<li><img alt="大搜车，二手车，夜店，晚上22:00点" src="images/hall5.jpg" /><ins>首创“夜店”模式 营业至晚间22:00<br/>
为繁忙都市人提供灵活便捷的购车时间</ins></li>
</ul>
</div>
<!--hall_show end-->
<!--rideCar-->
<div id="checkCar" class="wrap">
<div class="show_title">
<h1><span></span>全方位检测 保证车源质量</h1>
<p>大搜车的每一台在售车辆提供356项详细检测，包括底盘检测、发动机检测、驾驶体验检测、内饰外观检测及漆面修复检测。<br/>
操作工序多达468道，确保杜绝火烧车、水浸车及重大事故车辆，让您安心选车，放心购车。</p>
</div>
<div class="checkCar_show clearfix"> <img src="images/check1.jpg" /> <img src="images/check2.jpg" /> <img src="images/check3.jpg" /> </div>
<p class="check_decorate"><ins>360度全方位检测</ins>提供详细专业的检测报告</p>
<img src="images/check4.jpg" class="check_img" /> </div>
<!--rideCar end-->
<!--alpha_price-->
<div id="alpha_price" class="wrap">
<div class="show_title">
<h1><span></span>价格透明</h1>
<p>卖家自主定价<br/>
大搜车只收取卖家交易金额的3%作为服务费<br/>
</p>
</div>
<p class="price_decorate"></p>
<img src="images/alpha_price.png" /> </div>
<!--alpha_price end-->
<!--alpha_price-->
<div id="service_show" class="wrap">
<div class="show_title">
<h1><span></span>1对1过户专员全程服务</h1>
<p>大搜车全程免费为您办理过户、转籍、上牌等手续！</p>
<div class="service_tag"> <ins><span></span>过户</ins> <ins><span></span>转籍</ins> <ins><span></span>上牌</ins> </div>
</div>
</div>
<!--alpha_price end-->
<!--payment-->
<div id="pay_show" class="wrap">
<div class="show_title">
<h1><span></span>分期付款 购车无压力</h1>
<p>大搜车为您量身打造了“分期付款”业务<br/>
只需首付，爱车开回家！<br/>
轻松购车，再无压力！</p>
</div>
</div>
<!--alpha_price end-->
<!--quality_promise-->
<div id="quality_promise" class="wrap clearfix">
<div class="show_title">
<h1><span></span>全方位质保 再无后顾之忧</h1>
<p>大搜车为您购买的爱车提供“7天无理由退货“和“1年2W公里超长质保”</p>
</div>
<div class="promise_content"> <ins></ins>
<dl>
<dt>7天无理由退货
<dt>
<dd>只要在购车同时购买1.5%的“退货保障险”，就可以在7天内享受退货选择权，无论理由是“颜色不喜欢，或买了后悔了”。但7天内请您按约定照顾好小车。</dd>
</dl>
</div>
<div class="promise_content promise_content_180"> <ins></ins>
<dl>
<dt>1年2万公里质保
<dt>
<dd> 自提车之日起，大搜车为您提供长达1年或20000公里（先到原则）的质保服务。若您的爱车出现质保范围内的故障，大搜车将免费提供维修或更换部件服务。</dd>
</dl>
</div>
</div>
<!--quality_promise end-->
<!--ourInfo-->
<div id="ourInfo" class="wrap clearfix">
<ul>
<li class="ourInfo_phone"><span></span>4008-010-010</li>
<li class="ourInfo_weibo"><span></span>程序员设计师联盟淘宝店新浪微博<ins>
<wb:follow-button uid="3206746194" type="red_1" width="67" height="24" ></wb:follow-button>
</ins><br/>
<a target="_blank" href="#">#</a></li>
<li class="ourInfo_taobao"><span></span>程序员设计师联盟淘宝店<br/>
<a target="_blank" href="#">#</a></li>
<li class="ourInfo_cooper"><span></span>商务合作<br/>
admin@sucaijiayuan.com</li>
</ul>
<div class="weixin">
<h1>微信公众号二维码</h1>
<p>扫一扫，关注程序员设计师联盟淘宝店<br/>
或搜索公众帐号“程序员设计师联盟淘宝店”</p>
<img src="images/weixin.jpg" width="109px" height="109px" />
<p>百分百真人回复，随时随地<br/>
掌握免费素材信息！</p>
</div>
</div>
<!--ourInfo end-->
<div id="footer">
<div class="footer-content">
<div class="wrapper">
<div class="performance clearfix">
<div class="per-1 per"><a target="_blank" href="#"><i></i>
<div class="t">绝无火烧车，水淹车</div>
<div class="st">356项质检，保证车辆品质</div>
</a> </div>
<div class="per-2 per"><a target="_blank" href="#"><i></i>
<div class="t">1年2万公里质保</div>
<div class="st">二手车享受新车质保服务</div>
</a> </div>
<div class="per-3 per"><a target="_blank" href="#"><i></i>
<div class="t">分期付款</div>
<div class="st">提供最长3年分期付款服务</div>
</a> </div>
</div>
</div>
</div>
</div>
<script>
$(function(){
//优势页面点击子导航
var subNav_active = $(".adv_active");
var subNav_scroll = function(target){
subNav_active.removeClass ("adv_active");
target.parent().addClass("adv_active");
subNav_active = target.parent();
};
$("#subNav a").click(function(){
subNav_scroll($(this));
var target = $(this).attr("href");
var targetScroll = $(target).offset().top - 80;
$("html,body").animate({scrollTop:targetScroll},300);
return false;
});
//页面跳转时定位
if(window.location.hash){
var targetScroll = $(window.location.hash).offset().top - 80;
$("html,body").animate({scrollTop:targetScroll},300);
}
$(window).scroll(function(){
var $this = $(this);
var targetTop = $(this).scrollTop();
var footerTop = $("#footer").offset().top;
var height = $(window).height();
if (targetTop >= 520){
$("#subNav").addClass("fixedSubNav");
$(".empty-placeholder").removeClass("hidden");
}else{
$("#subNav").removeClass("fixedSubNav");
$(".empty-placeholder").addClass("hidden");
}
if(targetTop < 750){
subNav_scroll($(".adv_door"));
}else if(targetTop > 1200 && targetTop < 1640){
subNav_scroll($(".adv_source"));
}else if(targetTop > 2314 && targetTop < 2734){
subNav_scroll($(".adv_price"));
}else if(targetTop > 2968 && targetTop < 3268){
subNav_scroll($(".adv_transfer"));
}else if(targetTop > 3327 && targetTop < 3627){
subNav_scroll($(".adv_payment"));
}else if(targetTop > 3651 && targetTop < 4071){
subNav_scroll($(".adv_promise"));
}else if(targetTop > 4163 && targetTop < 4473){
subNav_scroll($(".adv_ride"));
}else if(targetTop > 4580){
subNav_scroll($(".adv_finance"));
}
})
}());
</script>
</body>
</html>
CSS代码(common.css):
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote{margin:0;padding:0}
fieldset,img{border:0}
dl{border:none;-webkit-margin-before:0;-webkit-margin-after:0;}
:focus{outline:0}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:normal;font-weight:normal}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
abbr,acronym{border:0;font-variant:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
code,kbd,samp,tt{font-size:100%}
input,button,textarea,select{*font-size:100%}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
caption,th{text-align:left}
sup,sub{font-size:100%;vertical-align:baseline}
:link,:visited,ins{text-decoration:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}
body{font-size:12px;font-family:Tahoma,Verdana;color:#000;background-color:#fff}
a{color:#000}
a:hover{text-decoration:none;color:#e70}
.wrap{width:1000px;margin:0 auto;zoom:1;}
.marginRight0{margin-right:0}
.wrapGrayBg{height:100%;width:100%;position:fixed;top:0;left:0;background-color:#000;z-index:10000}
.must_write{color:#f00;padding-right:5px}
.hidden{display:none !important}
optgroup{color:#008000;background-color:#f5f5f5;font-weight:bold}
option{color:#333;line-height:1.8em;font-style:normal;font-weight:normal;background-color:#fff}
#header{background-color:#e7e7e7}
#footer{margin-top:30px;height:auto}
#footer .wrapper{width:1190px;margin:0 auto;overflow:hidden}
#footer .friendlinks{text-align:center;margin-top:20px}
#footer .friendlinks a{font-size:12px;color:#999;padding:0 10px;border-right:1px solid #e6e6e6}
#footer .friendlinks a.last{border:none}
#footer .footer-content{background:#f5f5f5;border-top:1px solid #e6e6e6}
#footer .performance{padding:40px 0;border-bottom:1px solid #e6e6e6;width:1400px}
#footer .performance i{display:block;width:40px;height:40px;position:absolute;top:8px;left:20px}
#footer .performance .per{float:left;width:465px}
#footer .performance .per a{display:block}
#footer .performance .per-1 a{background:url(../images/per-1.png) no-repeat;background-position:left}
#footer .performance .per-2 a{background:url(../images/per-2.png) no-repeat;background-position:left}
#footer .performance .per-3 a{background:url(../images/per-3.png) no-repeat;background-position:left}
#footer .performance .t{font-size:16px;line-height:30px;color:#666;margin-left:50px}
#footer .performance .st{font-size:14px;color:#999;line-height:20px;margin-left:50px}
#footer .company_info{padding:20px 0px}
#footer .company_info .wrap{text-align:center}
#footer .company_info .wrap a{color:#666;padding:0 10px}
CSS代码(inside.css):
body{background-color:#f2f2f2}
.empty-placeholder{height:120px}
#brand_affect,#hall_show,#alpha_price,#checkCar,#rideCar,#quality_promise,#stockFinance,#ourInfo,#sellFlow{background-color:#fff;margin-bottom:20px;border:1px solid #d9d9d9}
#subNav{width:100%;height:80px;background-color:#000;margin-bottom:40px}
#subNav li{float:left;position:relative}
#subNav .wrap{width:1002px;}
#subNav a{display:block;width:167px;height:67px;text-align:center;color:#9c9a9a;padding-top:13px}
#subNav a:hover{text-decoration:none}
#subNav a ins{display:block;width:52px;height:40px;margin:0 auto;background:url(../images/souche_sprite2.jpg) no-repeat 10px -334px}
#subNav a span{position:absolute;width:20px;height:20px}
#subNav a:hover,#subNav .adv_active a{background-color:#e70;color:#fff}
#subNav a:hover ins,#subNav .adv_active ins{background:url(../images/souche_service1.png) no-repeat 10px -190px}
#subNav a:hover span,#subNav .adv_active span{background:url(../images/souche_png.png) no-repeat 0 -90px;left:76px;bottom:-10px;_background:none}
#subNav .adv_source ins{background-position:-49px -334px}
#subNav .adv_price ins{background-position:-101px -334px}
#subNav .adv_transfer ins{background-position:-155px -334px}
#subNav .adv_payment ins{background-position:-202px -334px}
#subNav .adv_promise ins{background-position:-251px -334px}
#subNav .adv_ride ins{background-position:-301px -334px}
#subNav .adv_finance ins{background-position:-349px -334px}
#subNav .adv_source:hover ins,#subNav .adv_active .adv_source ins{background-position:-49px -191px}
#subNav .adv_price:hover ins,#subNav .adv_active .adv_price ins{background-position:-101px -191px}
#subNav .adv_transfer:hover ins,#subNav .adv_active .adv_transfer ins{background-position:-155px -191px}
#subNav .adv_payment:hover ins,#subNav .adv_active .adv_payment ins{background-position:-202px -191px}
#subNav .adv_promise:hover ins,#subNav .adv_active .adv_promise ins{background-position:-251px -191px}
#subNav .adv_ride:hover ins,#subNav .adv_active .adv_ride ins{background-position:-301px -191px}
#subNav .adv_finance:hover ins,#subNav .adv_active .adv_finance ins{background-position:-349px -191px}
.fixedSubNav{position:fixed;top:0;left:0;z-index:1000}
.show_title{color:#fff;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana}
.show_title h1{font-size:36px;padding-top:40px;margin-bottom:10px}
.show_title h1 span{float:left;width:56px;height:47px;background:url(../images/souche_png.png) no-repeat -53px 3px;_background:none;_width:0}
.show_title p{font-size:16px}
#quality_promise{padding-bottom:45px}
#brand_affect{padding-bottom:50px}
#quality_promise .show_title,#brand_affect .show_title{height:160px;width:100%;background-color:#93715d}
#quality_promise h1 span{background-position:0 3px;margin-left:254px;_margin-left:290px}
#brand_affect h1 span{background-position:0 1px;margin-left:384px}
#quality_promise .show_title p,#brand_affect .show_title p{text-align:center}
.brand_show{padding-top:45px;padding-left:20px;padding-bottom:32px}
.brand_show li{float:left}
.media{width:950px;margin:0 auto;border-top:1px dotted #b2b2b2;padding-top:43px}
.media_visit{float:left;padding-right:40px}
.media_title{color:#333;font-size:18px;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana;margin-bottom:15px}
.media_video{width:257px;height:183px;background-color:#000;margin-bottom:19px}
.media_news{color:#333;line-height:2.2em;width:257px;height:77px;overflow:hidden}
.media_news ins{color:#666}
.media_photos{float:left;padding-right:40px}
.media_ditie{float:left}
.promise_content{float:left;display:inline;width:425px;margin-left:50px;margin-top:40px}
.promise_content ins{width:76px;height:76px;background:url(../images/souche_sprite2.jpg?124) no-repeat 1px -377px;display:block;margin:0 auto;margin-bottom:22px}
.promise_content dl{border:1px dotted #b2b2b2;height:133px;color:#333}
.promise_content dt{width:130px;margin:0 auto;text-align:center;font-size:18px;margin-bottom:24px;margin-top:-13px;_margin-top:5px;_margin-bottom:14px;background-color:#fff;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana}
.promise_content dd{font-size:14px;width:380px;margin:0 auto;line-height:1.6em;*margin-top:-44px}
.promise_content_180 ins{background-position:-84px -377px}
#hall_show{padding-bottom:5px}
#hall_show .show_title{height:220px;background:url(../images/souche_bg.png) 345px 29px no-repeat #886c90}
#hall_show .show_title h1{margin-left:48px;padding-top:140px}
#hall_show p{color:#444;font-size:18px;padding-top:35px;line-height:1.8em;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana;width:966px;margin:0 auto;margin-bottom:35px}
#hall_show p ins{color:#ff4301;font-size:24px}
.hallImg_show{padding-left:5px}
.hallImg_show li{float:left;margin:5px;position:relative}
.hallImg_show ins{position:absolute;left:0;bottom:0;width:100%;zoom:1;line-height:1.5em;padding:15px 0;background-color:rgba(0,0,0,0.5);font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana;color:#fff;text-align:center;font-size:16px}
#alpha_price{padding-bottom:30px}
#alpha_price .show_title{height:270px;background:url(../images/souche_bg.png) 50px -243px no-repeat #4398ca}
#alpha_price .show_title h1{margin-left:639px;padding-top:60px}
#alpha_price .show_title p{margin-left:639px;line-height:1.8em}
#alpha_price .price_decorate{text-align:center;color:#333;font-size:16px;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana;line-height:74px}
#alpha_price img{margin:0 auto;display:block}
#checkCar .show_title{height:222px;background-color:#a98c7b}
#rideCar .show_title{height:190px;background-color:#72954f}
#checkCar .show_title h1,#rideCar .show_title h1{margin-left:50px;padding-top:40px}
#checkCar .show_title p,#rideCar .show_title p{margin-left:50px;line-height:1.8em}
.rideCar_show{padding-left:35px}
.rideCar_show img{margin-bottom:10px}
.rideCar_show li{float:left;display:inline;width:207px;margin:40px 0 0 80px;padding-bottom:35px;color:#333;font-size:16px;text-align:center;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana}
.checkCar_show{margin-top:10px}
.checkCar_show img{float:left;margin-left:10px}
.check_decorate{color:#333;font-size:18px;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana;margin:30px 0}
.check_decorate ins{color:#ff4301;font-size:24px;padding-right:10px;padding-left:10px}
.check_img{display:block;margin:0 auto;margin-bottom:45px}
#service_show{height:340px;background:url(../images/service_show.jpg) no-repeat #a49742;margin-bottom:20px}
#service_show .show_title h1{margin-left:496px;padding-top:66px}
#service_show .show_title p{margin-left:500px;line-height:1.8em}
.service_tag{margin-left:429px}
.service_tag ins{float:left;display:inline;color:#fff;font-size:14px;font-weight:bold;text-align:center;margin-left:30px;margin-top:49px;width:100px}
.service_tag ins span{float:left;width:50px;height:40px;margin-bottom:10px;margin-left:30px;margin-right:30px;background:url(../images/souche_png.png) no-repeat 5px -52px}
#pay_show{height:324px;background:url(../images/payment.jpg) right top no-repeat #4398ca;margin-bottom:20px}
#pay_show .show_title h1{margin-left:56px;padding-top:61px;margin-bottom:30px}
#pay_show .show_title p{margin-left:56px;line-height:1.8em}
#stockFinance .show_title{height:123px;width:100%;background-color:#4398ca}
#stockFinance h1 span{background-position:0 -181px;margin-left:254px}
.finance_content{padding-top:170px;background:url(../images/finance.jpg) no-repeat center 38px;margin-left:34px;margin-bottom:50px}
.finance_content p{width:370px;height:140px;padding:20px 30px;float:left;color:#333;font-size:14px;line-height:1.7em;border:1px dotted #b2b2b2}
.finance_content span{display:block;width:37px;height:37px;float:left;background:url(../images/souche_sprite2.jpg?124) no-repeat -122px -277px;margin:72px 15px 0}
#ourInfo ul{float:left;width:450px;padding-top:50px;padding-bottom:30px}
#ourInfo li{color:#333;font-size:14px;font-weight:bold;clear:both;height:77px;line-height:1.7em}
#ourInfo span{display:block;width:50px;height:50px;float:left;background:url(../images/souche_sprite2.jpg?124) no-repeat -166px -276px;margin-left:48px;margin-right:10px}
.ourInfo_weibo ins{float:right;margin-right:164px;_margin-right:114px;margin-top:-2px;*margin-top:-25px;width:65px;height:25px}
#ourInfo a{color:#666;font-weight:normal}
#ourInfo a:hover{color:#e70}
.ourInfo_phone{text-indent:-9999em;background:url(../images/souche_sprite2.jpg?124) no-repeat 103px -457px;_background:none}
#ourInfo .ourInfo_weibo span{background-position:-225px -276px}
#ourInfo .ourInfo_taobao span{background-position:-286px -276px}
#ourInfo .ourInfo_cooper span{background-position:-349px -276px}
.weixin{width:245px;padding-top:56px;text-align:center;float:right;display:inline;color:#333;margin-right:63px}
.weixin h1{font-size:18px;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana;margin-bottom:33px}
.weixin img{margin:20px 0}
.weixin p{line-height:1.7em}
.souche_weibo{color:#333;text-align:left;padding-left:52px}
.souche_weibo:hover{text-decoration:none}
#advance_banner{width:100%;height:370px;background:url(../images/advantage2.jpg) no-repeat top center #e6ebef;text-indent:-9999em}
#footer{position:relative;zoom:1;}
分享到QQ
分享到微博
微信扫一扫
