title: Jquery scroll event causing performance issues
body: <p>I'm trying to use the browser scroll event to place a block of html based on the amount a user has scrolled. The code works but it is causing a huge performance issue which basically forces my browser to freeze.</p>
  
  <p>Any insight as to why and what I could do to resolve this would be greatly appreciated.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $('#content').scroll(function () {
      var scroll = $('#content').scrollTop();
      var $controls = $(".controls").clone();
      if (scroll &gt; 200) {
          $(".controls").remove();
          $('#header').append($controls);
      }
      else {
          $(".controls").remove();
          $('.banner').append($controls);
      }
  });
  
  &lt;/script&gt;
  </code></pre>