What you want to do is to add a class to your header bar if you scroll to a certain point.
So if you have a header called <div class="sticky-header">Your header</div>
and add a second class called fixed
that will be applied after scrolling to 100px from the top of the window it will stick from there.
JQUERY:
$(window).scroll(function(){
if ($(window).scrollTop() >= 100) {
$('.sticky-header').addClass('fixed');
}
else {
$('.sticky-header').removeClass('fixed');
}
});
CSS:
.fixed {
position: fixed;
top:0; left:0;
width: 100%;
}