zoukankan      html  css  js  c++  java
  • sideBar的tab定位及内容区域的滚动响应tab高亮 (angular)

    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的方式;

      此处理论上改成指令的方式会更好一些,后面再说了...

  • 相关阅读:
    libevent库的使用方法
    libevent中定时器的使用方法
    最小二乘原理(1)——线性等权重最小二乘
    E: Could not get lock /var/lib/dpkg/lock-frontend
    Ubuntu 18.04源码编译安装OpenCV 4.0步骤
    基于Socket和OpenCV的实时视频传输
    Jetson Nano系列教程3:GPIO
    Jetson Nano 系列教程2:串口调试接口登录Jetson Nano
    推荐 5 款牛逼的代码编辑器
    spring-boot-run 指令是怎么运行 Spring Boot 项目的?
  • 原文地址:https://www.cnblogs.com/vonson/p/9776639.html
Copyright © 2011-2022 走看看