<div id="header"></div>
<div id="content"></div>

#header{
    height: 300px;
    background: #bbb;
}

#content{
    height: 900px;
    background: #444;
}

.fixed{
    position: fixed;
    top: 0;
    left: 0;
}

<script>

var header = $('#header');
var heightHeader = header.height;

window.onscroll = function(){
    if ($('#header').classList.contains('fixed'){
        $('#header').classList.remove('fixed');
        $('#content').css({"margin-top" : "0"});
    } else{
        $('#header').classList.add('fixed');
        $('#content').css({"margin-top" : "heightHeader"});
    }
};
</script>