返回首页 | 一键访问 | 收藏本站 | 免费素材分享QQ群:136888926

当前位置:首页 > JS代码 > 导航代码 > jQuery实现固定顶部 定位滚动导航效果代码
下载地址收藏素材

jQuery实现固定顶部 定位滚动导航效果代码

jQuery实现固定顶部 定位滚动导航效果代码,很常见的效果,非常实用;滚动滚动条时,导航固定顶部,并且滚动到对应的板块时,当前导航高亮显示;点击导航文字时平滑跳转到对应的板块。

$(function(){
	varsubNav_active=$(".adv_active");
	varsubNav_scroll=function(target){
		subNav_active.removeClass	("adv_active");
		target.parent().addClass("adv_active");
		subNav_active=target.parent();
	};
	$("#subNava").click(function(){
		subNav_scroll($(this));
		vartarget=$(this).attr("href");
		vartargetScroll=$(target).offset().top-80;
		$("html,body").animate({scrollTop:targetScroll},300);
		returnfalse;
	});
	//页面跳转时定位
	if(window.location.hash){
		vartargetScroll=$(window.location.hash).offset().top-80;
		$("html,body").animate({scrollTop:targetScroll},300);
	}
	$(window).scroll(function(){
		var$this=$(this);
		vartargetTop=$(this).scrollTop();
		varfooterTop=$("#footer").offset().top;
		varheight=$(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"));
		}elseif(targetTop>1200&&targetTop<1640){
				subNav_scroll($(".adv_source"));
		}elseif(targetTop>2314&&targetTop<2734){
				subNav_scroll($(".adv_price"));
		}elseif(targetTop>2968&&targetTop<3268){
				subNav_scroll($(".adv_transfer"));
		}elseif(targetTop>3327&&targetTop<3627){
				subNav_scroll($(".adv_payment"));
		}elseif(targetTop>3651&&targetTop<4071){
				subNav_scroll($(".adv_promise"));
		}elseif(targetTop>4163&&targetTop<4473){
				subNav_scroll($(".adv_ride"));
		}elseif(targetTop>4580){
			subNav_scroll($(".adv_finance"));
		}
	})
}());

jQuery实现固定顶部 定位滚动导航效果代码

«
»
钱柜娱乐官网