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



32 125 42



特效描述:利用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/>
      admin@sucaijiayuan.com</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>



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


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 收缩菜单 收缩导航 右键菜单 导航切换 菜单切换 浮动菜单 浮动导航 flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 滑动导航菜单 滑动导航 滑动菜单 滚动导航菜单 滚动菜单 滚动导航 滑动选项卡 滑动切换 滚动切换 滚动条切换 自动滚动图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 固定导航 固定菜单 全屏滚动 导航菜单插件 导航插件 菜单插件 全屏切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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