JSFiddle - React, Tailwind, and code Playground

by k_rma

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="height:100px; background-color:red;">
header
</div>


  <nav id="fixedbar">
    <ul id="fixednav">
      <li><a href="#">Homepage</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Community</a></li>
      <li><a href="#">Staff Members</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
    
    <div id="content">
      <h2>Content headline</h2>
      <p>Content is courtesy of <a href="http://bluthipsum.com/">Bluth Ipsum</a>. Logo Icon freebie released by <a href="http://365psd.com/day/176/">Pontus Johansson</a>.</p>
      
      <p>I've used one adjective to describe myself. What is it? Professional. Yeah, like I'm going to spill coffee all over this $3,000 suit? Come on! It's not like envy, or even hungry!</p>
      
      
  


    
    <nav id="navigation">
      <ul>
        <li><a href="#">Homepage</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Community</a></li>
        <li><a href="#">Staff Members</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
      
      <p>It's so watery. And yet there's a smack of ham to it. George Michael may be suffering from what we in the soft-sciences call Obsessive Compulsive Disorder, or the "OC Disorder." Dad would stage elaborate situations using a one-armed man to teach us lessons. I'd want to get in there and find some answers.</p>
      
      <h3>Another Top Heading</h3>
      <p>These are my awards, Mother. From Army. The seal is for marksmanship, and the gorilla is for sand racing. I run a pretty tight ship around here. With a pool table? It's a gaming ship.</p>
      
      <p>Absolutely. And we're going to be here every day. I don't care if it takes from now till the end of Shrimpfest. Look at us, crying like a bunch of girls on the last day of camp.</p>
      
      <p>No borders, no limits… go ahead, touch the Cornballer... you...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  
}
html { height: 101%; }
body { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 62.5%; line-height: 1; padding-bottom: 65px; background-color: #fff ; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }



h2 { 
  font-family: 'Capriola', Tahoma, Arial, sans-serif;
  font-weight: normal;
  font-size: 2.95em;
  line-height: 1.2em;
  letter-spacing: -.0.03em;
  color: #383838;
  margin-bottom: 16px;
}

p { font-size: 1.7em; line-height: 1.45em; margin-bottom: 15px; color: #434343; }

a { color: #5b77a4; text-decoration: underline; }
a:hover { color: #7d94bb; }




#content {
  display: block;
  background: #fff;
  padding: 14px 20px;
}



/* top navigation */
#navigation {
  width:100%;
  display: block;
  height: 35px;
  background-color: #131313;
}

#navigation ul { list-style: none; padding: 0px 7px; }

#navigation ul li { display: inline; float: left; }
#navigation ul li a { 
  display: block; 
  padding: 0 8px; 
  color: #fff;
  font-size: 1.1em;
  text-decoration: none;
  line-height: 35px; 
  font-weight: bold; 
  margin-right: 6px;

}
#navigation ul li a:hover { color: #a8d6e7; }

/* hidden fixed navigation */
#fixedbar { 
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  background: rgba(0,0,0,0.85);
}

#fixednav { 
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0px...

JavaScript

$(document).ready(function(){
  $('#navigation a, #fixedbar a').on('click', function(e) {
    e.preventDefault();
  });
  
  $(window).on('scroll',function() {
    var scrolltop = $(this).scrollTop();

    if(scrolltop >= $("#navigation").offset().top + $("#navigation").height()) {
      $('#fixedbar').fadeIn(250);
    }
    else {
      $('#fixedbar').fadeOut(250);
    }
  });
});