JSFiddle - React, Tailwind, and code Playground

by Pedro Pinto

HTML

<script src="https://rawgit.com/Doist/ICE/master/ICE.js"></script>
<nav class="js-navbar">This is the navbar</nav>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam officia odio officiis, placeat debitis, libero repudiandae enim excepturi corrupti laborum, dolore suscipit consequatur nihil quas accusamus sapiente voluptates quaerat vitae!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos a obcaecati ea, ab, nisi nobis ipsum alias id dicta asperiores. Provident minus dignissimos illum commodi obcaecati dolorem ad, tenetur laudantium!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque pariatur facere magnam hic inventore explicabo consequatur, qui sequi architecto praesentium quasi deserunt numquam, provident ipsa libero magni et ex dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quas beatae expedita quae qui incidunt in ducimus, cupiditate, vitae autem, nostrum soluta animi iure ratione. Animi consequuntur, voluptatibus ut sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos a obcaecati ea, ab, nisi nobis ipsum alias id dicta asperiores. Provident minus dignissimos illum commodi obcaecati dolorem ad, tenetur laudantium!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque pariatur facere magnam hic inventore explicabo consequatur, qui sequi architecto praesentium quasi deserunt numquam, provident ipsa libero magni et ex dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quas beatae expedita quae qui incidunt in ducimus, cupiditate, vitae autem, nostrum soluta animi iure ratione. Animi consequuntur, voluptatibus ut sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam officia odio officiis, placeat debitis, libero repudiandae enim excepturi corrupti laborum, dolore suscipit consequatur nihil quas accusamus sapiente voluptates quaerat vitae!</p>
<p>Lorem ipsum...

CSS

body { padding-top: 3rem; }

nav {
  background-color: #ffeeee;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); 
  padding: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 250ms ease;
}

p { margin: 1rem 0; }

nav.not_on_top {
  background-color: #ffffff;
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.2); 
  position: fixed;
}

Babel + JSX

const NavBar = ((navBar) => {

    const settings = {
      scrollFPS: 6,
      flagClass: 'not_on_top'
    };

    const elements = {
      navBar: navBar
    };

    const measurements = {
      navBarHeight: elements.navBar.offsetHeight,
      flagMargin: 10 // Extra pixels the scroll will have to move until the flagClass is applied
    };


		// Setup events
    const setUpEvents = () => {
    	// Scroll event
      window.addEventListener('scroll', () => {
        throttle(() => {
          updatePosition();
         }, settings.scrollFPS);
      });
    };

		// Update position
    const updatePosition = () => {
      const scrollPosition = window.pageYOffset;

      if (scrollPosition >= measurements.navBarHeight + measurements.flagMargin) {
        $addClass(elements.navBar, settings.flagClass);
      } else {
        $removeClass(elements.navBar, settings.flagClass);
      }
    };

		// Throttle events
    const throttle = (callback, fps) => {
      let isUpdating = false;

      if(isUpdating) {
        return;
      }

      isUpdating = true;

      setTimeout(() => {
        requestAnimationFrame(() => {
          callback.call(this);
          isUpdating = false;
        });
      }, 1000 / fps);
    };
    
    // Init
    const init = () => {
    	setUpEvents();
    };
    init();
    


})($$('.js-navbar')[0]);