force scrollbar itself to stop moving upwards (fake limit) while the div is still being scrolled up. - scrollbar

Question

jsFiddle: http://jsfiddle.net/2ezQ9/2/
On my site, I am using NiceScroll3 to have a scrollbar within the container div which is pulling data with AJAX. My problem is this: when I scroll to the top of the container div, the scrollbar itself continues to scroll under the header and to the top of the container. This is normal, I know, but I would like the scrollbar to stop at the bottom of the header when the container finishes scrolling. Basically, I want the scrollbar to stop with a top-margin that this the same as the height of my header (i.e.: not overlap with the header). I have searched endlessly and cannot find a solution online. Thank you in advance!
HTML
<div id="wrapper">
<div id="header">STICKY HEADER</div>
<div id="content">CONTENT
<br />CONTENT<br />CONTENT<br />CONTENT <br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT <br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
</div>
<div class="push"></div>
</div>
CSS
#wrapper {
padding: 0;
height: auto; !important;
position: relative;
margin: 0;
width: 100%;
top:0;
}
#header {
position: fixed;
z-index: 1;
margin: 0;
padding: 0;
left: 0;
height: 40px;
width: 100%;
background-color: blue;
}
#content {
padding: 5px;
padding-top: 44px;
filter: alpha(opacity=50);
max-width: 1105px;
border: 1px solid #333333;
margin-right: auto;
background:#252525;
}

Answer 1

If I understand your question correctly you could use a jQuery scroll event and not let pass the height of the header something like this: http://jsfiddle.net/2ezQ9/4/
$(window).scroll(function () {
if ($(this).scrollTop() < 58) {
$(this).scrollTop(58);
}
});