jQuery: Keep menu on top when scroll

Keep navigation menu on top screen when scroll over page.

by Porfirio Chavez

HTML

<div id="container">
  <div id="menu">
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </div>
  <div class="content">
    <div style="background-color: #69B898; height: 300px;"></div>
    <div style="background-color: #97CEB8; height: 300px;"></div>
    <div style="background-color: #BBDFD0; height: 300px;"></div>
    <div style="background-color: #E2F1EB; height: 300px;"></div>
    <div style="background-color: #69B898; height: 300px;"></div>
    <div style="background-color: #97CEB8; height: 300px;"></div>
    <div style="background-color: #BBDFD0; height: 300px;"></div>
    <div style="background-color: #E2F1EB; height: 300px;"></div>
  </div>
</div>

CSS

body {
	margin: 0;
	color: #8DCC00;
	background-color: #E2FFFC;
	font-family: "arial";
	font-size: 1.5em;
}

#container {
   width: 100%;  
}

li{
	float: left;
	list-style: none;
	padding-left: 40px;
  cursor: pointer;
  margin: 0 6px;
}

li:hover {
  color: #2D7700;
  background-color: #8DCC00;
}

#menu {
  width: 100%;
	position: absolute;
	background-color: #2D7700;
	top: 30%;
	padding-right: 80px;
}

JavaScript

$(function(){
	var menu = $('#menu');
  var originalTop = menu.offset().top;
  var originalSize = menu.width().valueOf();  // Posición top original

  $(window).scroll(
    function(e){
      if ($(this).scrollTop() > originalTop ){ 
        menu.css({'position': 'fixed', 'top': '0px'});
      } else { 
        menu.css({'position': 'absolute', 'top': originalTop}); 
      } 
    });
});