React页面中间内容滚动时，激活选中侧边栏对应的内容（反向锚点）

class Innovation extends Component {
  constructor() {
    super()
    this.state = {
      companyAsideList: [
        {
          title: 'Research & Developme',
          flag: 'Research',
        },
        {
          title: '5 R&D Division',
          flag: '5R&Division',
        },
        {
          title: 'Patents & Awards',
          flag: 'Patents',
        },
      ]
    }
    this.onScroll = this.handleScroll.bind(this)
  }
  // 获取元素距离顶部的距离和offsetParent
  getDomeHeight(el) {
    if (el.nodeName === 'BODY') {
      return 0
    } else {
      return parseInt(el.offsetTop) + this.getDomeHeight(el.offsetParent)
    }
  }
  // 选中侧边栏事件
  setDefult(index, flag) {
    this.setState({ activeTitle: index, activeAside: flag })
  }
  // 滚动事件
  handleScroll() {
    // 获取当前window Scroll距离顶部的高度
    let windowScrollTop = document.documentElement.scrollTop || document.body.scrollTop
    for (let i = 0; i < this.state.companyAsideList.length; i++) {
      // id标识
      const { flag } = this.state.companyAsideList[i]
      // 获取每一个Dom对象
      let curEle = document.getElementById(flag)
      if (curEle) {
        let curEleOffsetTop = this.getDomeHeight(curEle)
        // 判断滚动条滚动到对应位置
        if (curEleOffsetTop <= windowScrollTop && 
          windowScrollTop <= curEle.offsetHeight + curEleOffsetTop) {
          this.setDefult(i, flag)
          // 固定吸顶侧边栏选中方法
          // this.state.isShowAside && this.fixedAsideRef.current.updateActive(i, flag)
        }
      }
    }
  }
  render() {
    return (
        <div className='container'>
            <div className="container-left">
               <div id='Research'>...</div>
               <div id='5R&Division'>...</div>
               <div id='Patents'>...</div>
            </div>
            <div className="container-right">
               // 侧边栏
            </div>
        </div>
    )
  }
}
export default Innovation