Team:BIT-China/js/left nav

   /*
   * 仿百度百科右侧导航代码 - 页面目录结构导航 v0.01
   * 只写了两级，无限级别也可以，是逻辑上的级别，html结构全是同一级别
   * 滑标动画用的css3过渡动画，不支持的浏览器就没动画效果了
   * 和百度百科比起来还是比较弱，没有实现右边也可以滚动的功能
   */
   function DirectoryNav($h,config){
       this.opts = $.extend(true,{
           scrollThreshold:0.1,    //滚动检测阀值 0.5在浏览器窗口中间部位
           scrollSpeed:500,        //滚动到指定位置的动画时间
           scrollTopBorder:500,    //滚动条距离顶部多少的时候显示导航，如果为0，则一直显示
           easing: 'swing',        //不解释
           delayDetection:0,     //延时检测，避免滚动的时候检测过于频繁
           scrollChange:function(){}
       },config);
       this.$win = $(window);
       this.$h = $h;
       this.$pageNavList = "";
       this.$pageNavListLis ="";
       this.$curTag = "";
       this.$pageNavListLiH = "";
       this.offArr = [];
       this.curIndex = 0;
       this.scrollIng = false;
       this.init();
   }

   DirectoryNav.prototype = {
       init:function(){
           this.make();
           this.setArr();
           this.bindEvent();
       },
       make:function(){
           //生成导航目录结构,这是根据需求自己生成的。如果你直接在页面中输出一个结构那也挺好不用 搞js

$("#left_nav_tofix").append('

');

           var $hs = this.$h,
               $directoryNav = $("#directoryNav"),
               temp = [],
               index1 = 0,
               index2 = 0;
           $hs.each(function(index){
               var $this = $(this),
                   text = $this.text();

               if($this.hasClass('first_level_nav')){
                   index1++;//'+index1+'.
                   if(index1%2==0) index2 = 0;

temp.push('

<a class="l1-text">'+text+'</a>

');

               }else{
                   index2++;

temp.push('

'+index1+'.'+index2+' <a class="l2-text">'+text+'</a>

');

               }
           });
           $directoryNav.find("ul").html(temp.join(""));

           //设置变量
           this.$pageNavList = $directoryNav;
           this.$pageNavListLis = this.$pageNavList.find("li");
           this.$curTag = this.$pageNavList.find(".cur-tag");
           this.$pageNavListLiH = this.$pageNavListLis.eq(0).height();

           if(!this.opts.scrollTopBorder){
               this.$pageNavList.show();
           }
       },
       setArr:function(){
           var This = this;
           this.$h.each(function(){
               var $this = $(this),
                   offT = Math.round($this.offset().top);
               This.offArr.push(offT);
           });
       },
       posTag:function(top){
           this.$curTag.css({top:top+'px'});
       },
       ifPos:function(st){
           var offArr = this.offArr;
           //console.log(st);
           var windowHeight = Math.round(
               this.$win.height() * this.opts.scrollThreshold);

           for(var i=0;i<offArr.length;i++){
               if((offArr[i] - windowHeight) < st) {
                   var $curLi = this.$pageNavListLis.eq(i),
                       tagTop = $curLi.position().top;
                   $curLi.addClass("cur").siblings("li").removeClass("cur");
                   this.curIndex = i;
                   this.posTag(tagTop+this.$pageNavListLiH*0.5);

// this.curIndex = this.$pageNavListLis.filter(".cur").index();

                   this.opts.scrollChange.call(this);
               }
           }
       },
       bindEvent:function(){
           var This = this,
               show = false,
               timer = 0;
           this.$win.on("scroll",function(){
               var $this = $(this);
               clearTimeout(timer);
               timer = setTimeout(function(){
                   This.scrollIng = true;
                   if($this.scrollTop()>This.opts.scrollTopBorder){

// if(!This.$pageNavListLiH) This.$pageNavListLiH = This.$pageNavListLis.eq(0).height(); // if(!show){ // This.$pageNavList.fadeIn(); // show = true; // } // console.log($(this).scrollTop());

                       This.ifPos($(this).scrollTop());
                   }else{

// if(show){ // This.$pageNavList.fadeOut(); // show = false; // }

                   }
               },This.opts.delayDetection);
           });

           this.$pageNavList.on("click","li",function(){
               var $this = $(this),
                   index = $this.index();
               This.scrollTo(This.offArr[index]);
           })
       },
       scrollTo: function(offset,callback) {
           var This = this;
           $('html,body').animate({
               scrollTop: offset
           }, this.opts.scrollSpeed, this.opts.easing, function(){
               This.scrollIng = false;
               //修正弹两次回调 蛋疼
               callback && this.tagName.toLowerCase()=='body' && callback();
           });
       }
   };

   //实例化
   var directoryNav = new DirectoryNav($(".first_level_nav,.second_level_nav"),{
       scrollTopBorder:0   //滚动条距离顶部多少的时候显示导航，如果为0，则一直显示
   });

   $(document).ready(function (e) {
       
   window.onscroll = function(e){

       var e =e || window.event;
       var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;

       $navbar = $("nav.navbar");
       if(scrolltop > 80){
           $navbar.css({'position': 'fixed','opacity': 0, 'display': 'none' });
           $("#left_nav").css({'position': 'fixed','left': 0,'top': 0});
       }else{
           $navbar.css({'position': 'relative','opacity': 1, 'display': 'block'});
           $("#left_nav").css({'position': 'relative'});
       }

   };
   });