I have tried it and I hope this is what you want.. Click the link below for Demo..
This is the HTML
<div id="headerSlideContainer">
<div id="headerSlideContent">
Header content goes here!
</div>
<div id="new">
Other Contents
</div>
</div>
n here goes CSS..
#headerSlideContainer {
position: absolute;
top:0px;
width: 100%;
height:1000px;
background: black;
}
#headerSlideContent {
width: 900px;
height: 50px;
margin: 0 auto;
color: white;
background:Red;
z-index:10000;
position:fixed;
}
#new{
top:60px;
z-index:2;
height:100px;
background:Orange;
position:absolute;
color: white;
}
n this is the Javascript..
$(function() {
var bar = $('#headerSlideContainer');
var top = bar.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 50) {
bar.stop().animate({'top' : '5px'}, 500);
} else {
bar.stop().animate({'top' : top}, 500);
}
});
});