FIXED HEADER
Run 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
  .header {
    position:fixed;
	width: 100%;
	height: 150px;
	background-color: #cccccc;
	text-align : center;
	top: 0;
	left: 0;
	  }
  
   .navbar a {
	  float: left;
	  display: block;
	  color: #ff3456;
	  text-align: center;
	  padding: 14px 16px;
	  text-decoration: none;
	}
  .navbar a:hover {
	  background: #cdf;
	  color: blue;
	}
  .container {
     margin-top: 50px;
   }
</style>
</head>
<body>
	<div class="header">
	  <h1>Fixed Header</h1>
	  <div class="navbar">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Products</a>
        <a href="#">Services</a>
        <a href="#">Contact Us</a>
       </div>
    </div>
	<div class="container">
	  <h3>Scroll here to see effect</h3>  
	  <h3>Scroll here to see effect</h3>  
	  <h3>Scroll here to see effect</h3>  
	  <h3>Scroll here to see effect</h3>  
	  <h3>Scroll here to see effect</h3>  
	  <h3>Scroll here to see effect</h3>  
	  <h3>Scroll here to see effect</h3>  
	  <h3>Scroll here to see effect</h3>  
	  <h3>Scroll here to see effect</h3>  
	  <h3>Scroll here to see effect</h3>  
	  <h3>Scroll here to see effect</h3>  
	  <h3>Scroll here to see effect</h3>  
	  <h3>Scroll here to see effect</h3>  
	  <h3>Scroll here to see effect</h3>  
	</div>
</body>
</html>