Fixing header after some scroll

by Mayank Khanna

HTML

<div id="header"></div>
<div id="menu"></div>
<div id="rest_body"></div>

CSS

body {
    margin: 0;
}

#menu {
    background:#06D85F;
    position: relative;
    height: 60px;
    width: 100%;
}

#header {
    height: 200px;
    width: 100%;
    background: #2196f3;
}

#rest_body {
    height: 2000px;
    width: 100%;
    background: #7f7f7f;
}

JavaScript

$(document).scroll(function() {
    var y = $(document).scrollTop();
        header = $("#menu");
    if(y >= 200)  {
        header.css({position: "fixed", "top" : "0", "left" : "0"});
    } else {
        header.css("position", "relative");
    }
});