How do I make a header above my navigation bar?

I'm trying to create a navigation bar with a header above it. I want it to be so that the navigation bar will stick once it reaches the top of the screen (which I've already worked out myself) but anything above it will not stick (will scroll off screen as normal). A VERY GOOD EXAMPLE OF WHAT I'M TRYING T DO IS Happy Cog. Go there and scroll down until the header disappears but the navigation bar stays visible and appears connected to the top of the browser window. That's what I want: the header to be placed ABOVE the navigation bar and disappear when scrolling but the navigation bar stay at the top of the browser. I want to make sure it scrolls and runs as smoothly as theirs as well--no jumping around or jumping to the top of the window. How do I put content above the navigation bar and make it where it won't stick when the navigation menu does?

I REALLY APPRECIATE ANY HELP YOU GUYS CAN BE! THANKS SO MUCH IN ADVANCE!

MY HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header role="banner" id="top">
<div id="navbar" class="banner">
<div id="header-text">
<h1>
<strong id="top-title">
Atlas Land Office (text will change)
</strong>
</h1>
<p id="slogan">
Keeping lands fresh.
</p>
</div>
<div id="menu">
<ul role="navigation" class="banner">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#land">Land Surveying</a>
</li>
<li id="nav-space-left">
<a href="#civil">Civil Engineering</a>
</li>
<li id="nav-home">
<a href="#top" title="Back to top">
<img src="#logo" alt="Atlas Land Office" />
</a>
</li>
<li>
<a href="#planning">Land Planning</a>
</li>
<li>
<a href="#company">Company</a>
</li>
<li>
<a href="#careers">Careers</a>
</li>
</ul>
</div>
</div>
</header>
</body>
</html>

My CSS (that I have up to this point--no where near finished):

body {
height: 3000px;
top: 0;
position: relative;
}

#navbar {
position: relative;
width: 1329px;
height: 44px;
background: #CCC;
margin-left:-8px; /* Connects the navigation menu to the left "wall" */
margin-top:-8px;
top: 100px;
padding-left:10px;
padding-right:10px;
}

My jQuery:

$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$('#navbar').css('top', $(window).scrollTop());
}
}
);

Solution

I have Changed Your Code A bit and it's working fine Now. tested in Chrome

HTML

<body>
<header role="banner" id="top">
<div id="header-text">
    <h1><strong id="top-title">Atlas Land Office (text will change)</strong></h1>
    <p id="slogan">Keeping lands fresh.</p>
</div>

<div id="menu">
     <ul role="navigation" class="banner">
           <li><a href="#home">Home</a> </li>
           <li><a href="#land">Land Surveying</a></li>
           <li id="nav-space-left"><a href="#civil">Civil Engineering</a></li>
           <li id="nav-home"><a href="#top" title="Back to top"><img src="#logo" alt="Atlas Land Office"></a></li>
           <li><a href="#planning">Land Planning</a></li>
           <li><a href="#company">Company</a></li>
           <li><a href="#careers">Careers</a></li>
    </ul>
   </div>
</header>
</body>

CSS

 body {
 height: 3000px;
 top: 0;
 position: relative;
   }
 #header-text{
  height:200px;
  border:2px solid;     
 }
 #menu {
display:block;
  }
 #menu ul {
width:1000px;
background-color:#666;
border:1px solid;
height:30px;
 }
 #menu ul li{
float:left;
padding:5px;
list-style:none;
 }
 #menu ul li a{
color:white;
text-decoration:none
 }
 .fixnav{
position:fixed;
top:0;
z-index:1000;   
 }

JQUERY

  $(window).scroll(function ()

    {     
        if ( $(window).scrollTop() > 200)
        {
            $("#menu").addClass("fixnav");
        }
        else  if ($(window).scrollTop() < 200)
        {
            $("#menu").removeClass("fixnav");
        }
    });