JSFiddle - React, Tailwind, and code Playground

by Mariel Temblor

HTML

<body>
<div id="container"> <!--wrapper-->
	<header id="header">
    	<div id="menu" class="menu"> <!--navMenu-->
		<nav>
        	<ul>
                <li><a href="index.php" > HOME </a></li>
                <li>OUR PRODUCT
				<ul> 
					<li><a href="productOverview.php" > PRODUCT OVERVIEW</a></li>
					<li><a href="usage.php" > CHEESECLOTH USAGE</a></li>
					<li><a href="reviews.php" > PRODUCT REVIEWS </a></li>
				</ul>
				</li>
				<li> SUGGESTIONS 
				<ul>
					<li><a href="tips.php" > TIPS and IDEAS </a></li>
					<li><a href="recipe.php" > RECIPES </a></li>
					<li><a href="ideas.php" > NEWS and EVENTS </a></li>
				</ul>
				</li>
				<li><a href="about.php" > ABOUT US </a> </li>
				<li><a href="contact.php" > CONTACT US </a> </li>
        	</ul> 
			<br class="clearFloat" />
		</nav>
        </div>
</header>

<section id="content">
	<center>
	<br /><br /><br />
	<div style="position:relative; z-index:3;"> <img src="images/frontTitle.png" style="display:inline; margin: 50px auto; margin-bottom: -28em;"/> </div>
	<div id="myreel" style="position:relative; z-index:2"></div>
	
	<div> 
		<a href="http://www.amazon.com/Perfect-Holiday-Cheesecloth-Natural-Unbleached/dp/B00P8GHQH6/ie=UTF8?m=A1SE4HDS3G65MU&keywords=cheesecloth+food+grade" target="_blank">
				<img src="images/wantBtn.png" style="display:inline; margin: 50px auto; margin-top: 2em;"/> </a>
	</div>
	</center>
	
	<div class="mainTxt">
		<center>
			<img src="images/phLine.jpg" /> 
			<h1> Are you tired of eating dry turkey for your holidays meals? </h1>
			<p style="margin: 40px 100px;"> Chefs across the world (including almost all celebrity chefs) will recommend using soaked
			Cheesecloth to keep your holiday meats perfectly juicy and eliminate the inconvenience of
			basting. Basting also causes heat to escape from your convection oven and can cause cooking
			times to vary immensely. Cook it right every time with cheesecloth! 
			<br /><br />
			The Perfect Holiday Cheesecloth will make...

CSS

.fmenu,
.push {
  height: 4em;
  clear: both;
}
/*ends here */

body {
  background: url(images/cheeseclothBG.jpg)no-repeat center center fixed;
  font-family: Avenir !important;
  font-size: 12pt;
  line-height: 20px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#header {
  background: url(images/header.jpg) no-repeat;
  min-height: 270px;
  overflow: hidden;
  background-size: 100%;
}
#content {
  float: left;
  width: 100%;
  margin-top: -101px;
  background: #fff;
  position: relative;
}
#img {
  margin: 5px;
  padding: 5px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}
#img img {
  display: inline;
  margin: 5px;
  border: 1px solid #ffffff;
}
#desc {
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 5px;
}
#container {
  width: 826px;
  margin: 0 auto;
  box-shadow: 0 0 5px 1px #ccc;
}
#menu {
  margin: 0;
  padding: 0;
}
#menu ul {
  margin: 0;
  padding: 0;
  line-height: 30px;
  margin-left: 35px;
  margin-top: 139px;
}
#menu li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  position: relative;
  background: #fff;
}
#menu ul li a {
  text-align: center;
  font-family: "Comic Sans MS", cursive;
  font-size: 12px;
  text-decoration: none;
  height: 30px;
  width: 150px;
  display: block;
  color: #000;
  margin-left: 10px;
  text-shadow: 1px 1px 1px #999;
}
#menu ul li {
  text-align: center;
  font-family: "Comic Sans MS", cursive;
  font-size: 12px;
  text-decoration: none;
  height: 30px;
  width: 150px;
  display: block;
  color: #000;
  text-shadow: 1px 1px 1px #999;
}
#menu ul li ul li a {
  text-align: center;
  margin-left: 0px;
}
#menu ul li ul {
  margin-top: -5px;
}
#menu ul li ul li {
  margin-top: -2px;
  margin-left: -35px;
  position: relative;
}
#menu ul ul {
  position: absolute;
  top: 32px;
}
#menu ul li:hover ul {
  z-index: 1;
}
/*******************************/

#menu...

JavaScript

jQuery(document).ready(function() {
	
	// define variables
	var navOffset, scrollPos = 0;
	
	// add utility wrapper elements for positioning
	jQuery("nav").wrap('<div class="nav-placeholder"></div>');
	jQuery("nav").wrapInner('<div class="nav-inner"></div>');
	jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');
	
	// function to run on page load and window resize
	function stickyUtility() {
		
		// only update navOffset if it is not currently using fixed position
		if (!jQuery("nav").hasClass("fixed")) {
			navOffset = jQuery("nav").offset().top;
		}
		
		// apply matching height to nav wrapper div to avoid awkward content jumps
		jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());
		
	} // end stickyUtility function
	
	// run on page load
	stickyUtility();
	
	// run on window resize
	jQuery(window).resize(function() {
		stickyUtility();
	});
	
	// run on scroll event
	jQuery(window).scroll(function() {
		
		scrollPos = jQuery(window).scrollTop();
		
		if (scrollPos >= navOffset) {
			jQuery("nav").addClass("fixed");
		} else {
			jQuery("nav").removeClass("fixed");
		}
		
	});
	
});