Fixed header on scroll past point

by Cam Gould

HTML

<div id="#first-block" height="100px"></div>
<div id="second-block" height="200px"></div>
<div id="block-menu">HI YA</div>

CSS

#block-menu {
background-color: rgb(27, 85, 131);
position: relative;
    border:solid 1px red;
}

body{
    
    height:3000px;
}

JavaScript

$(document).ready(function(){
    var header = $("#block-menu");
    $(document).scroll(function(e) {
        if($(this).scrollTop() >= 300)  {
            header.css({position: "fixed", "top" : "50px"});
        } else {
            header.css({position: "relative", "top" : "0"});
        }
    });
});