JSFiddle - React, Tailwind, and code Playground

by mattblancarte

HTML

<!DOCTYPE>
<!--[if IE 7]>
<html class="ie ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" />
<title>Book More Brides | Just another WordPress site</title>
<link href="http://ubd.me/bmb/wp-content/themes/bookmorebrides/style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic|Euphoria+Script' rel='stylesheet' type='text/css'>
<link href="http://ubd.me/bmb/wp-content/themes/bookmorebrides/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="http://ubd.me/bmb/wp-content/themes/bookmorebrides/favicon.ico" rel="icon" type="image/x-icon">
<link href="http://ubd.me/bmb/xmlrpc.php" rel="pingback">
<link href="http://gmpg.org/xfn/11" rel="profile">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ubd.me/bmb/wp-content/themes/bookmorebrides/js/main.js"></script>
<!--[if lte IE 7]>
<meta http-equiv="refresh" content="0;URL=http://ubd.me/bmb/wp-content/themes/bookmorebrides/browser-warning/">
<![endif]-->
<meta name='robots' content='noindex,follow' />
<link rel="alternate" type="application/rss+xml" title="Book More Brides &raquo; Home Comments Feed" href="http://ubd.me/bmb/home/feed/" />
<link rel='stylesheet' id='jetpack-widgets-css'  href='http://ubd.me/bmb/wp-content/plugins/jetpack/modules/widgets/widgets.css?ver=20121003' type='text/css' media='all' />
<link rel='canonical' href='http://ubd.me/bmb/' />
<link rel='shortlink' href='http://wp.me/P4dUq8-4' />
<script type='text/javascript' data-cfasync='false'>
  //<![CDATA[
    (function() {
      var shr = document.createElement('script');
     ...

JavaScript

jQuery(document).ready(function ($) {
    var $nav_bar = $('#header'),
        $window = $(window),
        position;
    
    $window.on('scroll', updateHeader);
    
    function updateHeader () {
        position = $window.scrollTop();
        if (!position) { // If we are at the top of the page
            $nav_bar.css('top', 35);
        } else if (position < 35) {
            $nav_bar.css('top', parseInt(35 - position, 10));
        } else {
            $nav_bar.css('top', 0);
        }
    };
});