Fixing a header after scrolling to a certain point

For this we have to use javascript for fixing header at a certain point.

$(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");
 }
});

So here #menu is the id of the header that i want to fix .

JS fiddle link – My Code