jquery 滾軸滾動 導航定位和錨點定位

 

 自己寫的，只測試了ie9+， firefox，chrome 

 以下js更好

    var fixbar={
      init:function(){
        "use strict";
        // 滾軸 導航位置變化
        var that=this;
        this._navbar=$("#navbar");
        this._navbody=$("#navbody");
       
        this._navbodyTop=this._navbody.offset().top; //導航目標標簽 距離頁面頂部高度
        console.log(this._navbodyTop+"====")
        this._navbarH=this._navbar.outerHeight(); //導航高度
        this._navbodyH=this._navbarH;// 給內容默認導航的高度

        this._navbodyBottom=this._navbodyTop; //內容頁的最底端距離頁面頂部高度
        this._navbodyBottomFix=this._navbodyTop; //內容頁的最底端距離頁面頂部高度 - 導航的高度
        this._navbarTop=0; //導航 距離內容頁頂部的高度

        this._imgh=[]; //內容頁 圖片距離頁面頂部的高度
        // this._lastimg= this._navbody.find("img:last-child");
        // if(this._lastimg[0].complete){console.log(1); //ie使用
        //   this.setH();
        // }else{   console.log(0); 
          // this._lastimg.load(function(){  that.setH();});
          $(window).load(function(){  that.setH();});
          // this.scrollGoto();
        // }
        this.linkhref();   
        $(window).scroll(function() {
            that.scrollGoto(); 
        });
      },
      setH:function(){ 
          //導航定位
          this._navbodyH=this._navbody.outerHeight();
          this._navbodyBottom=this._navbodyTop+this._navbodyH;
          this._navbodyBottomFix=this._navbodyTop+this._navbodyH-this._navbarH;
          this._navbarTop=this._navbodyH-this._navbarH-10;
          // 導航錨點定位
          var that=this;
          this._navbody.find("img").each(function(){
              that._imgh.push($(this).offset().top-100);
          });
          this.scrollGoto();
      },
      scrollGoto:function(){            
          this._scrollT=$(window).scrollTop(); 
          if(this._scrollT>this._navbodyTop){
            //修改導航位置
            if(this._scrollT<this._navbodyBottomFix){
              this._navbar.addClass("fixed").removeAttr("style");
            }else{
              this._navbar.removeClass("fixed").css({"margin-top":this._navbarTop+"px"});
            }
            //修改導航錨點樣式
            if(this._scrollT<this._navbodyBottom){
              var lii=0;
              for(var i=0;i<this._imgh.length;i++){  
                if(this._imgh[i]<this._scrollT){ 
                  lii=i;
                }else{
                  break;
                }
              }
              this._navbar.find("li").eq(lii).addClass("on").siblings("li").removeClass("on");
            }
          }else{ 
            this._navbar.removeClass("fixed").removeAttr("style");
            this._navbar.find("li").eq(0).addClass("on").siblings("li").removeClass("on");
          }  
      },
      linkhref:function(){
        //點擊跳轉
        var that=this;
        this._navbar.find("li").click(function(){
          // var thisli=$(this);
          this._gotoTop=that._navbody.find("img[data-loc="+$(this).attr("data-href")+"]").offset().top;
          if(undefined!=this._gotoTop){
            // $(window).scrollTop(gotoTop,5000);
            $(this).addClass("on").siblings("li").removeClass("on");
            $('html,body').animate({scrollTop:this._gotoTop+"px"},500);
          }
        });
      }
    } 

    $(function(){
       fixbar.init();   
    })

 

 

缺點：1.未封裝的方法 2.點擊最后一個li導航時，定位到倒數li導航會定位到倒數第二個去

    $(function (){
      "use strict";
        //左側導航 start
        // 滾軸 導航位置變化
        var $navbar=$("#navbar"), $navbody=$("#navbody");
       
        var navbodyTop=$navbody.offset().top; //導航目標標簽 距離頁面頂部高度
        var navbarH=$navbar.outerHeight(); //導航高度
        var navbodyH=navbarH;// 給內容默認導航的高度

        var navbodyBottom=0; //內容頁的最底端距離頁面頂部高度
        var navbodyBottomFix=0; //內容頁的最底端距離頁面頂部高度 - 導航的高度
        var navbarTop=0; //導航 距離內容頁頂部的高度


        var imgh=[]; //內容頁 圖片距離頁面頂部的高度
        var $lastimg= $navbody.find("img:last-child");
        if($lastimg[0].complete){console.log(1); //ie使用
          setH();
        }else{   console.log(0); 
          $lastimg.load(function(){setH();});
        }
        function setH(){ console.log(2); 
            //導航定位
            navbodyH=$navbody.outerHeight();
            navbodyBottom=navbodyTop+navbodyH;
            navbodyBottomFix=navbodyTop+navbodyH-navbarH;
            navbarTop=navbodyH-navbarH-10;
            // 導航錨點定位
            $navbody.find("img").each(function(){
                imgh.push($(this).offset().top-100);
            });
            scrollGoto();
        }

        $(window).scroll(function() {
              scrollGoto(); 
        });

        //定義滾動操作
        function scrollGoto(){              
          var scrollT=$(window).scrollTop(); //alert(scrollT);
          // console.log(scrollT); //alert(scrollT);
          if(scrollT>navbodyTop){ //console.log(navbodyBottomFix);
            //修改導航位置
            if(scrollT<navbodyBottomFix){
              $navbar.addClass("fixed").removeAttr("style");
            }else{
              $navbar.removeClass("fixed").css({"margin-top":navbarTop+"px"});//.css({});
            }
            //修改導航錨點樣式
            if(scrollT<navbodyBottom){
              for(var i=0;i<imgh.length;i++){
                if(imgh[i]>scrollT){
                  $navbar.find("li").eq(i-1).addClass("on").siblings("li").removeClass("on");
                  break;
                }
              }
            }
          }else{ //console.log(1);
            $navbar.removeClass("fixed").removeAttr("style");
            $navbar.find("li").eq(0).addClass("on").siblings("li").removeClass("on");
          }  
        }
       
        //點擊跳轉
        $navbar.find("li").click(function(){
          var gotoTop=$navbody.find("img[data-loc="+$(this).attr("data-href")+"]").offset().top;
          if(undefined!=gotoTop){
            // $(window).scrollTop(gotoTop,5000);
            $(this).addClass("on").siblings("li").removeClass("on");
            $('html,body').animate({scrollTop:gotoTop+"px"},500);
          }
        });
        //左側導航 end
    })
    </script>