title: jQuery: Showing a hidden div on page scroll
body: <p>jQuery</p>
  
  <pre><code>function showDiv() {
      if ($(window).scrollTop() &gt; 100) {
          $('.lock').fadeIn('slow');
      } else {
          $('.lock').fadeOut('slow');
      });
  }
  $(window).scroll(showDiv);
  showDiv();
  </code></pre>
  
  <p>HTML (.lock { display: none; position: fixed; })</p>
  
  <pre><code>&lt;div class="lock"&gt;
      Text
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to get a hidden fixed div to appear when you scroll to a certain part of the page, and to disappear when you scroll back up. What am I doing wrong?</p>