jquery function is most important
<script>
$(function(){
var stickyHeaderTop = $('#stickytypeheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickytypeheader').css({position: 'fixed', top: '0px'});
$('#sticky').css('display', 'block');
} else {
$('#stickytypeheader').css({position: 'static', top: '0px'});
$('#sticky').css('display', 'none');
}
});
});
</script>
Then use JQuery Lib...
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Now use HTML
<div id="header">
<p>This text is non sticky</p>
<p>This text is non sticky</p>
<p>This text is non sticky</p>
<p>This text is non sticky</p>
</div>
<div id="stickytypeheader">
<table width="100%">
<tr>
<td><a href="http://growthpages.com/">Growth pages</a></td>
<td><a href="http://google.com/">Google</a></td>
<td><a href="http://yahoo.com/">Yahoo</a></td>
<td><a href="http://www.bing.com/">Bing</a></td>
<td><a href="#">Visitor</a></td>
</tr>
</table>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
Check DEMO HERE