onGetElement = (contentViewClass,contentkindClass,sildViewClass,sildkindClass,id) =>{
    //contentViewClass 內容視口的類名  contentkindClass 內容裡面每個類的的類名   sildViewClass  title的視口類名  sildkindClass title每個類的類名  id 要選中的titlE改變狀態的 id
    //
    //
    //思路：1.先獲取內容裡面每個類的內容高度，把每個類的內容對應的titleid 還有距離視口的最小距離和最大距離寫個物件並push進 scollArry陣列中
    //2.獲取每個title內容距離title 視口的最小距離和最大距離寫個物件，然後push到sildScoll陣列中
    //3.監聽內容視口的滾動距離，每次滾動就去迴圈scollArry 陣列 去判斷滾動的距離大小落在哪個內容區間內，就把對應元素內的titleid 改變狀態
    //內容滾動 title 滾動  獲取title 視口的高度 取得title 可滾動的最大值 定義兩個引數 sildMin（大小等於視口的一半） 和 sildMax （等於最大滾動距離-視口的一半） 當內容塊滾動的時候，判斷 選中的title 對應在sildScoll 陣列中的物件區間，然後設定title視口的滾動高度為 title 物件區間最小值（sildScoll[i].min）- sildMin
    // 還要判斷當區間最小值小於等於sildMin 設定視口的滾動距離為0
    // 當選中的title 最大值 大於 sildMax  設定 title 滾動距離為title 可滾動最大高度
    /**
      *
      *
      *有需要自己改編，大部分用原生方法編寫小部分使用es6或者可以留言討論
      * 
      */
    var Element = document.getElementsByClassName(contentViewClass),
        foodtypeListH = document.getElementsByClassName(contentkindClass)[0],
        sildElement = document.getElementsByClassName(sildViewClass),
        sideListH = document.getElementsByClassName(sildkindClass)[0],
        scollArry = [],
        sildMin = sideListH.offsetHeight / 2,
        sildMax = sideListH.scrollHeight - sideListH.offsetHeight /2,
        sildScoll = [];
    //獲取菜品高度
    for (var i = 0; i < Element.length; i++) {
      if(i == 0){
        scollArry.push({
          min: 0,
          max: Element[i].offsetHeight,
          id:Element[i].getAttribute(id)
        })
      }else{
        scollArry.push({
          min: scollArry[i-1].max,
          max: scollArry[i-1].max + Element[i].offsetHeight,
          id:Element[i].getAttribute(id)
        })
      }
    };
    //獲取小類高度
    for (var i = 0; i < sildElement.length; i++) {
       if(i == 0){
          sildScoll.push({
            min: 0,
            max: sildElement[i].offsetHeight,
          })
        }else{
          sildScoll.push({
            min: sildScoll[i-1].max,
            max: sildScoll[i-1].max + sildElement[i].offsetHeight,
          })
        }
    };


    //監聽滾動
    foodtypeListH.onscroll = (function(){
      var num  = scollArry[0].min;


      for (var i = 0; i < scollArry.length; i++) {
        if(scollArry[i].min <= foodtypeListH.scrollTop && foodtypeListH.scrollTop < scollArry[i].max){
          num = scollArry[i].id
          if(sildScoll[i].min > sildMin && sildScoll[i].max < sildMax){
            sideListH.scrollTop = sildScoll[i].min - sildMin;
          }
          if(sildScoll[i].min < sildMin) {
            sideListH.scrollTop = 0;
          }
          if(sildScoll[i].max > sildMax ){
             sideListH.scrollTop = sideListH.scrollHeight
          }
        }
      };


      this.props.tabChange(num);//這個是調取action 來改變store 上選中title 的值
    }).bind(this)

  }

//可檢視效果連結，使用微信訪問進行進入點餐介面檢視效果：http://sz.canxingjian.com/wxdc/wxdd/production/index.html?appid=42458671&brandid=40&storeid=5&dishtype=2&table=-1