JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<div id="content">   
<div id="menu-bg">
    <div id="menu">
      <ul id="main">
      <li class="current_page_item"><a href="#">Homepage</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
      </ul>
      <ul id="feed">
      <li><a href="#">Entries RSS</a></li>
      <li><a href="#">Comments RSS</a></li>
    </ul>
  </div>
  </div>
</div>

CSS

body {
	margin: 0;
	padding: 0;
	background: #191E1A;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FCFFFD;
}
#menu-bg {
	background: #1E3227;
	height: 45px;
}
#menu {
	width: 1000px;
	margin: 0 auto;
    position: relative;
    margin-left: 160px;
}
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	margin: 0 3px 0 0;
	padding: 12px 15px 10px 15px;
    
	border: none;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #DDBB04;
}
#menu a:hover {
	margin: 0 3px 0 0;
	background: #191E1A;
	border-bottom: 3px solid #DDBB04;
	color: #FFFFFF;
}

#menu .current_page_item a {
	background: none;
	margin: 0 3px 0 0;
	background: #191E1A;
	border-bottom: 3px solid #DDBB04;
	color: #FFFFFF;
}

#content {
    height: 2000px;
}

#menu.fixed {
    position: fixed;
    float:left;
    margin-left: 160px;
    top: 0;
}

JavaScript

$(document).ready(function() {
  var $window = $(window),
  $navigation = $("#menu-bg");
$window.scroll(function() {
if (!$navigation.hasClass("fixed") && ($window.scrollTop() > $navigation.offset().top)) {
$navigation.addClass("fixed").data("top", $navigation.offset().top);
}
 else if ($navigation.hasClass("fixed") && ($window.scrollTop() < $navigation.data("top"))) {
$navigation.removeClass("fixed");
}
}); 
});