JSFiddle - React, Tailwind, and code Playground

by acsocmel

HTML

<p>hfghjgf</p><div id="navigation">
  menu menu menu menu menu
</div><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p><p>hfghjgf</p>

CSS

/*#navigation{
  position:absolute;
  top:120px;
  left:0;
}*/

#navigation.fixed{
  position:fixed;
  top:12px;
}

JavaScript

function scarassa(){

  // check that this is a relatively modern browser
  if (window.XMLHttpRequest){

    // determine the distance scrolled down the page
    var offset = window.pageYOffset
               ? window.pageYOffset
               : document.documentElement.scrollTop;

    // set the appropriate class on the navigation
    document.getElementById('navigation').className =
        (offset > window.innerHeight ? 'fixed' : '');

  }

}

// add the scroll event listener
if (window.addEventListener){
  window.addEventListener('scroll', scarassa, false);
}else{
  window.attachEvent('onscroll', scarassa);
}