Toolbar with transition to transparency.

Toolbar.js

// Toolbar component
class toolbar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      transform: null,
    };
  }

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

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

   handleScroll = (event) => {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop
      this.setState({
         transform: scrollTop
      });

      // Usage:
      //<nav className={`toolbar__navigation ${(this.state.transform > 22)? ('transparent'):('')}`}>
      // Fixed Top, Transition, opacity and height styles
      //console.log(this.state.transform);
   }

  render() {
     return(
      <header className="toolbar fixed-top">
         <nav className={`toolbar__navigation navbar navbar-expand-md navbar-dark ${(this.state.transform > 22)? ('transparent'):('')}`}>
              .....         
         </nav>
      </header>
     )
   }
}

Toolbar.scss

nav.toolbar__navigation {
   -webkit-transition: opacity 0.3s ease;
   transition: opacity 0.3s ease;
}

nav.toolbar__navigation.transparent {
  height: 60px;
  opacity: 0.8;
}