title: Fade in/Fade out, Fixed/Sticky Header
body: <p>Okay, I know it seems like I've asked this question already, for which @adeneo had previously answered and apreciated, however I am rattling my brains because I just can't get this to work.</p>
  
  <p>I'm trying to make my 'fixed' positioned header 'fadeTo' 0.5 Opacity when scrolled down and fade back to full opaqueness ('opacity': 1.0) when the user scrolls back to the top?</p>
  
  <p>Here's what I have:</p>
  
  <pre><code>$(window).on('scroll', function() {
  if ($(this).scrollTop() &gt; 50) {
  $("#header").fadeTo(400, 1);
  }else{
  $("#header").fadeTo(400, 0.5);
  
  }
  });
  </code></pre>
  
  <p>At the moment, using this code only seems to make it 'fadeTo' 0.5 opacity when scrolled down but it then won't fade back to full opaqueness (opacity: 1.0) when scrolled back to the top.</p>
  
  <p>Please help!</p>