React實現導航隨頁面滾動后固定/取消固定在視口頂部

1、針對需求：在React項目中，頁面中一個導航欄，當頁面向下滾動，導航欄即將消失時固定在視口頂部不動，當頁面向上滾動，滾動到導航欄原始所在位置時，導航欄跟着下來，恢復初始布局；

2、實現方案：

　　1）樣式代碼中定義兩個類，正常樣式（.menu），固定在頂部時的樣式（.fixed）；

　　2）組件state中定義一個變量（isFixed），用於標記元素是否需要固定在頂部；

　　3）利用 .offsetTop屬性獲取導航元素距離頁面頂部的距離x；

　　4）監聽頁面滾動事件，window.onscroll()，在滾動事件中獲取頁面滾動距離y（Math.max(document.body.scrollTop, document.documentElement.scrollTop)），通過判斷x和y的大小關系，修改isFixed的值，更新樣式；

　　5）在組件卸載時，移除事件監聽 EventEmitter.removeAllListeners();

3、代碼展示：

　　1）樣式&元素

.menu{
  height: 50px;
  width: 100%;
  background-color: #eee;
}
.fixed{
  position: fixed;
  top: 0;
  width: 100%;
}

 

<div id='fixed-menu' className={`menu ${this.state.needFixed ? 'fixed' : ''}`}>
    日期導航
 </div>

　　2）state

 

constructor(){
    super(props)
    this.state = {
        needFixed: false
    }
}

 

　　3）事件監聽

 

  componentDidMount() {

    const fixedTop = document.getElementById('fixed-menu').offsetTop;
    window.onscroll = () => {
      let scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop)
      //控制元素塊A隨鼠標滾動固定在頂部
      if (scrollTop >= fixedTop) {
        this.setState({ isFixed: true })
      } else if (scrollTop < fixedTop) {
        this.setState({ isFixed: false })
      }
    }
  }

 

　　4）移除事件

  componentWillUnmount() {
    EventEmitter.removeAllListeners();
  }

 

 4、綜上即可實現，導航欄滾動到頂部時固定在頂部，頁面向上滾動到導航欄位置時，導航欄跟隨頁面回到正常位置