滚动到一定高度就固定（fixed）导航栏

2019独角兽企业重金招聘Python工程师标准>>>

实战中运用到，mark下来

	//定位导航栏
	$(document).scroll(function(){
		var $top = parseInt($(window).scrollTop());
		if($top>=139){
			$(".stepBars").css({"position":"fixed","top":0,"z-index":5});
		}else{
			$(".stepBars").css({"position":"absolute","top":135,"z-index":5});
		}
	});

给导航栏的锚点功能添加动画效果

	$(".stepBars a").each(function(index){      //遍历导航栏的a标签
		$(this).bind("click",function(){
			var $href = $(this).attr("href");    //所得href即跳转到目的元素的选择器
			var $pos = $($href).offset().top;   //这里要换算的话记得用number()转换成数字
			$("html,body").animate({ scrollTop:$pos}, 40);			
		});
	});

滚动到相应的地方相应的锚点高亮

	//滚动到指定位置，对应锚点自动高亮
	$(window).scroll(function(){
		var $wst = $(window).scrollTop();
		var $cts_top = $("#cho_cts").offset().top-80;
		var $addr_top = $("#cho_serAddr").offset().top-80;
		var $time_top = $("#forSf_info").offset().top-80;
		var $sub_top = $("#xiadan_submit_box").offset().top-80;
		if($cts_top<=$wst){
			$(".stepBars a").removeClass("on").eq(0).addClass("on");
		}
		if($addr_top<=$wst){
			$(".stepBars a").removeClass("on").eq(1).addClass("on");
		}
		if($time_top<=$wst){
			$(".stepBars a").removeClass("on").eq(2).addClass("on");
		}
		if($sub_top<=$wst){
			$(".stepBars a").removeClass("on").eq(3).addClass("on");
		}
	});

逐个逐个来显得有点笨拙，有空研究下怎样遍历执行

转载于:https://my.oschina.net/daladida/blog/728142