This gist are add fixed header when you scroll down the page. When we at the top of the page it show the main nav after scroll down the header page it fixed to the top of the page and show rest of the website

sticky header using waypoint and css

/* sticky css class*/

.sticky {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0px 2px 2px #efefef;
  z-index: 1;
}

/* Javascript code */

$(document).ready(function () {
	//select the section when the section appear t
	$(".section-feature").waypoint(function (direction) {
		//check the directoin goes doen or up
		if (direction === "down") {
			//add class to the nav
			$("nav").addClass("sticky");
		} else {
			//remove the class
			$("nav").removeClass("sticky");
		}
	});

});