小案例：页面滚动事件以及导航栏点击

HTML

• html实现方法一：
  导航栏a标签href ,要与下列div中id属性对应，点击a标签即可滑动到对应id的div

<div class="navbar">	//导航栏
	<ul class="rightheader">
		<li><a class="page-scroll scroll active" href="#home">主页</a></li>
		<li><a class="page-scroll scroll" href="#about">关于我</a></li>
		<li><a class="page-scroll scroll" href="#edu">教育经历</a></li>
		<li><a class="page-scroll scroll" href="#project">项目经验</a></li>
		<li><a class="page-scroll scroll" href="#skills">技能/证书</a></li>
		<li><a class="page-scroll scroll" href="#contact">联系我</a></li>
		<li><input onclick="show()" id="btn-lr" type="button" value="登录/注册" class="login"></input></li>
	</ul>
</div>

<!-------------主页------------------>
<div class="main" id="home">
....
</div>

CSS

.active{  //点击后的样式
	background: #FFF;
	color:black;
}

JS

• $(this).attr(“href”) 获取所点击的a标签的href属性
• scrollTop: ( ( ((this).attr(“href”)).offset().top -30+ “px” 设置当前页面高度位置
• animate(,2000) 增加2s动画

$(document).ready(function(){
	$("ul li a").click(function(){	//点击a标签事件
		$("html, body").animate({scrollTop: $($(this).attr("href")).offset().top -30+ "px"}, 2000);	 
  		 return false;		//不要这句会有点卡顿
	});	
});

滚动页面事件

• $(aHref).offset().top 根据ahref获取对应的id元素 获取离顶部的距离

  $(document).scroll(function() {
        var scroH = $(window).scrollTop();  //当前滚动高度

   			//循环获取a标签下的href 判断
   			$("ul li a").each(function(){
   				var aHref =$(this).attr("href");	//获取到当前点击的a标签的href
				if(scroH >=($(aHref).offset().top-100)){	//判断当前位置是否到达获取到的aHref页面位置
					$("ul li a").removeClass("active")	//先移除
					$(this).addClass("active")	//再添加样式
				}
			})
 
});

效果图：

点击导航栏 ： 实现跳转到对应的div位置
滚动页面： 对于的导航栏标签样式改变