<div id="root"></div>
#root{ height: 200vh; background: #3c1671;}

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap');

// smart sticky header 
header{
  cursor: pointer;
  width: 10%;
  font-weight: 900;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Rubik', sans-serif;
  box-shadow: inset 0 -2px 0 0 hsla(0,0%,100%,1);
  color: #fff;
  position: sticky;
  top: -20px;
  font-size: 156px;
  transition: 1.345s ease-out;
  left: 4.9%;  
  
  &.isSticky{
     flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
    font-weight: 100;
    -webkit-tap-highlight-color: transparent;
    padding-top: 44px;
    left: 34.9%;  
    font-size: 38px;
    &::after{
      line-height: calc((13vw - 320px)/860*7 + 20px);
      box-shadow: inset 4px -0px 44px 98px hsla(0,0%,100%,1);
      width: 60%;
      content:" menu";
      color: #e826ff;
    }
  }
}
View Compiled
const {createRef, useState, useEffect} = React


function Header({ children, sticky=false, className, ...rest }){
  const [isSticky, setIsSticky] = useState(false)
  const ref = React.createRef()
  
  // mount 
  useEffect(()=>{
    const cachedRef = ref.current,
          observer = new IntersectionObserver(
            ([e]) => setIsSticky(e.intersectionRatio < 1),
            {threshold: [1]}
          )

    observer.observe(cachedRef)
    
    // unmount
    return function(){
      observer.unobserve(cachedRef)
    }
  }, [])
  
  return (
    <header className={className + (isSticky ? " isSticky" : "")} ref={ref} {...rest}>
      {children}
    </header>
  )
}


function App(){
  return <>
    <Header>DESIGN</Header>
  </>
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css

External JavaScript

  1. https://unpkg.com/react@16/umd/react.development.js
  2. https://unpkg.com/react-dom@16/umd/react-dom.development.js