利用jQuery實現定位滾動導航效果代碼



36 143 48



特效描述:利用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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 收縮菜單 收縮導航 右鍵菜單 導航切換 菜單切換 浮動菜單 浮動導航 flash導航菜單 flash導航條 flash導航 flash菜單 flash下拉菜單 flash下拉導航菜單 滑動導航菜單 滑動導航 滑動菜單 滾動導航菜單 滾動菜單 滾動導航 滑動選項卡 滑動切換 滾動切換 滾動條切換 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 導航菜單 導航條 菜單欄 導航欄 分類導航 響應式導航條 響應式導航 固定導航 固定菜單 全屏滾動 導航菜單插件 導航插件 菜單插件 全屏切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表