HTML部分
<div class="nav_myResume" scroll-sidebar>
<div class="resumeNav_sub a1" ng-class="{ 'active' : navCurrent == 1 }" ng-click="goArea('#introArea',1)"><span class="tab_line"></span>自我描述{{navCurrent}}</div>
<div class="resumeNav_sub a2" ng-class="{ 'active' : navCurrent == 2 }" ng-click="goArea('#workArea',2)"><span class="tab_line"></span>上传作品</div>
<div class="resumeNav_sub a3" ng-class="{ 'active' : navCurrent == 3 }" ng-click="goArea('#jobArea',3)"><span class="tab_line"></span>工作经历</div>
<div class="resumeNav_sub a4" ng-class="{ 'active' : navCurrent == 4 }" ng-click="goArea('#eduArea',4)"><span class="tab_line"></span>教育经历</div>
</div>
<div>
<div id="introArea"></div>
<div id="workArea"></div>
<div id="jobArea"></div>
<div id="eduArea"></div>
</div>
Js部分
tab切换内容滚动
$scope.navCurrent = 1;
$scope.goArea = function (para, cur) {
$('.resumeNav_sub').removeClass('active')
$('html,body').animate({scrollTop: $(para).offset().top - 80}, 500);
$scope.navCurrent = cur;
};
滚动内容切换tab
//滚动点亮相应tab
$(window).scroll(function(){
//为页面添加页面滚动监听事件
var wst = $(document).scrollTop(); //滚动条距离顶端值
if($("#introArea").offset().top<=wst+100){
$('.resumeNav_sub').removeClass('active')
$('.resumeNav_sub.a1').addClass('active')
}
if($("#workArea").offset().top<=wst+100){
$('.resumeNav_sub').removeClass('active')
$('.resumeNav_sub.a2').addClass('active')
}
if($("#jobArea").offset().top<=wst+100){
$('.resumeNav_sub').removeClass('active')
$('.resumeNav_sub.a3').addClass('active')
}
if($("#eduArea").offset().top<=wst+100){
$('.resumeNav_sub').removeClass('active')
$('.resumeNav_sub.a4').addClass('active')
}
})
此处之前想的是滚动到相应位置修改navCurrent的值,值能实时修改,但是页面不能实时响应,所以改成了jq的方式;
此处理论上改成指令的方式会更好一些,后面再说了...