snadrus · June 12, 2015 04:40
diff --git a/Menu that follows changed b/Menu that follows changed
 <!DOCTYPE HTML>
 <html>
 <head>
  <script>
  window.onload=function() {
  	var header = document.querySelector('.header');
  	isScrolled = false;
 	  window.addEventListener("scroll", function(ev) {
 	  	if (!document.body.scrollTop) {
 	  		if (isScrolled) {
 	  			header.classList.remove('scrolled');
 	  			isScrolled = false;
 	  		}
 	  	}else if (!isScrolled) {
 	  		header.classList.add('scrolled');
 	  		isScrolled = true;
 	  	}
 	  });
  }
  </script>
  <style>
   html, body { margin: 0;}
   .header {
   	font-size: 24px;
   	height: 80px;
   	background-color: #fca;
   	transition: all 5000ms ease-in-out;
   }
   .header.scrolled {
   	background-color: rgba(0,0,200,0.5);
   	position: fixed;
   	top: 0;
   	width: 100%;

   	height: 40px;
   	font-size: 18px;
   	color: green;
   }
  </style>
 </head>
 <body>
 <div class=header>
 This is a static header at the top of a page that becomes something else when scrolled. 
 </div>
 <br><br>lj;<br><br><br><br>lkjlkj<br><br>lkjkl<br><br><br>lkjlkj<br><br><br><br>jklj<br><br><br><br><br>lkj<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>lkjl<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 </body>
 </html>