gradually apply css on scroll reactjs code example

Example 1: react bootstrap navbar fade out

render(){
   const opacity = Math.min(100 / this.state.currentScrollHeight  , 1)

    return <div style={{opacity}} id='element-you-want-to-fade'> </div>
}

Example 2: react bootstrap navbar fade out

componentDidMount () {      
   window.onscroll =()=>{
    const newScrollHeight = Math.ceil(window.scrollY / 50) *50;
    if (this.state.currentScrollHeight != newScrollHeight){
        this.setState({currentScrollHeight: newScrollHeight})
    }
  }
}