スクロール位置に基づいてクラス名を変更する方法は？

Question

私はreactjsを使用しており、スクロール位置に基づいてdivのクラス名を変更する必要があります。このdivがページの上部に達すると、そのクラスを変更する必要があります。これを行う方法に関する提案はありますか？

Answer 1

divのoffsetTop位置を取得し、それをscrollTopと比較します。条件を満たす場合は、状態を設定してclassNameを設定します。

サンプルコード：

class App extends React.Component { 
    state = { 
    style: null 
    }; 

    handleScroll = e => { 
    if (e.target.scrollTop >= this.bbox.offsetTop) { 
     this.setState({ 
     className: "something", 
     divStyle: { backgroundColor: "orange" } 
     }); 
    } 
    }; 
    render() { 
    return (
     <div onScroll={this.handleScroll} style={styles}> 
     <Ipsum /> 
     <Ipsum /> 
     <br /> 
     <div 
      className={this.state.className} 
      style={this.state.divStyle} 
      ref={ref => (this.bbox = ref)} 
     > 
      HelloWorld 
     </div> 
     <br /> 
     <Ipsum /> 
     <Ipsum /> 
     <Ipsum /> 
     <Ipsum /> 
     <Ipsum /> 
     </div> 
    ); 
    } 
} 

P.S.ただし、サンプルコードとは異なり、パフォーマンス上の理由から、 が毎回状態を設定していないことを確認する必要があります。

Working DEMO