title: Problematic jQuery scrolling code
body: <p>OK - I've reduced this to it's simplest form:</p>
  
  <pre><code>&lt;div id="bar&gt;47 px high bar&lt;/div&gt;
  &lt;div id="header"&gt;
      &lt;ul&gt;
          &lt;li&gt;Nav1&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.</p>
  
  <pre><code>//Down
  $(function() {
      var interval = setInterval(function() {
          if ($(window).scrollTop() &gt;= 47) {
              $("#header").attr("id","header2");
              clearInterval(interval);
          }
      }, 50);
  });
  //Up
  $(function() {
      var interval = setInterval(function() {
          if ($(window).scrollTop() &lt; 47) {
              $("#header2").attr("id","header");
              clearInterval(interval);
          }
      }, 50);
  });
  </code></pre>
  
  <p>It works, but <em>only</em> in one direction - if I load at the top of the page it works scrolling down. If I load halfway down the page it works scrolling up. Go the other direction after this and nothing happens. Anyone know why?</p>