Sticky element in react

gistfile1.txt

 ---
 jsx
 ---

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = (event) => {
    const el = document.querySelector('#formSidebar');

    console.log(this.stickyBar.getBoundingClientRect());

    const top = this.stickyBar.getBoundingClientRect().top;

    if (top < 0) {
      console.log('above');
      if (!this.state.stickyEnabled) {
        this.setState({ stickyEnabled: true });
      }
    } else {
      console.log('below');
      if (this.state.stickyEnabled) {
        this.setState({ stickyEnabled: false });
      }
    }
  }
  
  
  ---
  html - jsx
  ---
  
  <section className="isolated" ref={ (stickyBar) => { this.stickyBar = stickyBar; } }>
  <div className={ this.state.stickyEnabled ? 'sticky-element' : '' }>
  </div>
  <section>
  
  
  
  ---
  style.css
  ---
  
 .sticky-element{
  position: fixed;
    top: 0;
    margin-top: 0;
    z-index: 9;
    width: 283px;
}