利用jQuery实现定位滚动导航效果代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

142 565 189



特效描述:利用jQuery实现 定位滚动导航。利用jQuery实现定位滚动导航效果代码

代码结构

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<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>全方位检测&nbsp;&nbsp;保证车源质量</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>分期付款&nbsp;&nbsp;购车无压力</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>全方位质保&nbsp;&nbsp;再无后顾之忧</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>51前端新浪微博<ins>
      <wb:follow-button uid="3206746194" type="red_1" width="67" height="24" ></wb:follow-button>
      </ins><br/>
      <a target="_blank" href="http://51qianduan.com">http://51qianduan.com</a></li>
    <li class="ourInfo_taobao"><span></span>51前端<br/>
      <a target="_blank" href="http://51qianduan.com">http://51qianduan.com</a></li>
    <li class="ourInfo_cooper"><span></span>商务合作<br/>
      [email protected]</li>
  </ul>
  <div class="weixin">
    <h1>微信公众号二维码</h1>
    <p>扫一扫,关注51前端<br/>
      或搜索公众帐号“51前端”</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="http://51qianduan.com"><i></i>
          <div class="t">绝无火烧车,水淹车</div>
          <div class="st">356项质检,保证车辆品质</div>
          </a> </div>
        <div class="per-2 per"><a target="_blank" href="http://51qianduan.com"><i></i>
          <div class="t">1年2万公里质保</div>
          <div class="st">二手车享受新车质保服务</div>
          </a> </div>
        <div class="per-3 per"><a target="_blank" href="http://51qianduan.com"><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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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