Fixed header upon scroll
<head>
<style>
.header-small {
position: fixed;
height: 100px;
background: pink;
top: 0;
width: 100%;
z-index: 99;
}
</style>
</head>
<div class="header-small">
test
</div>
<script>
$(window).scroll(function(){
if ($(window).scrollTop() >= 300) {
$('.header-small').show();
}
else {
$('.header-small').hide();
}
});
</script>