jQuery定位滚动导航效果代码

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

导航+相应项html

<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>
 
  </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-->

在页面下方直接载入js

<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>