jQuery网页顶部定位导航菜单页面滚动相应模块高亮显示



133 530 177



特效描述: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>站长素材新浪微博<ins>
      <wb:follow-button uid="3206746194" type="red_1" width="67" height="24" ></wb:follow-button>
      </ins><br/>
      <a target="_blank" href="http://sc.chinaz.com">http://sc.chinaz.com</a></li>
    <li class="ourInfo_taobao"><span></span>站长素材<br/>
      <a target="_blank" href="http://sc.chinaz.com">http://www.dijiuzhanzhang.com</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="http://www.dijiuzhanzhang.com"><i></i>
          <div class="t">绝无火烧车,水淹车</div>
          <div class="st">356项质检,保证车辆品质</div>
          </a> </div>
        <div class="per-2 per"><a target="_blank" href="http://www.dijiuzhanzhang.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://www.dijiuzhanzhang.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>



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


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 右键菜单 收缩菜单 收缩导航 图片放大镜 图片叠加 图片层叠 图片翻转 图片旋转 图片延迟加载 图片延迟 图片加载 图片淡出淡进 图片淡出 图片淡进 图片全屏 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 头像上传 图片上传 二维码 导航切换 菜单切换 flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 滚动导航菜单 滚动菜单 滚动导航 滑动导航菜单 滑动导航 滑动菜单 图片拖动 图片拖拽 浮动菜单 浮动导航 图片广告 地图 中国地图 世界地图 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 带缩略图的幻灯片 h5图片动画 h5图标动画 html5图片动画 html5图标动画 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 图片滚动 图片滚动条 图片切换 图片选项卡 图标选项卡 图片收缩展开 图片收缩 图片展开 图片滑动 图片滑块 纯图片轮播 图片轮播 图标导航 图标菜单 自动滚动图片轮播 背景切换 大图切换 滑动星星打分 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 图表 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 图片 图片插件 头像截图 其他 图片滑动 图片滑块 全屏滚动 图片高亮 导航菜单插件 导航插件 菜单插件 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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