title: How can I make this image stay fixed while fading away on scroll?
body: <p>I have a site here...</p>
  
  <p><a href="http://matiny.tk/warframe/about/index.html" rel="nofollow">http://matiny.tk/warframe/about/index.html</a></p>
  
  <p>When you scroll near the bottom, you see a .png lotus image layered on top of an image with characters on it. Then you keep scrolling and the lotus picture scrolls away. What I want is for the lotus image to become locked in place when it's top reaches the top of the window (when it's in perfect full view). At that point, scrolling should make it fade, not move.</p>
  
  <p>I was thinking I might make it position:fixed then use jQ to make it invisible until it reaches the right point, then make it fade on scroll.</p>
  
  <p>The relevant text is mega simple...</p>
  
  <pre><code>&lt;div class="char-div"&gt;
     &lt;img src="http://matiny.tk/warframe/about/lotus.png" alt="" class="lotus"/&gt;
  &lt;/div&gt;
  
  
  .char-div {
      position: relative;
      background-image: url(http://matiny.tk/warframe/about/chars.jpg);
      background-size: cover;
      background-position: center center;
      background-attachment: fixed;
      height: 1500px;
  }
  
  .lotus {
      width: 100%;
      position: absolute;
      top: 0;
  }
  </code></pre>