title: JQuery Scroll detection fire once
body: <p>I have a small piece of JQuery designed to collapse my header, change its dimensions, and then stick it to the side of the screen. It all works apart from one part, the height 'toggle' function fires every time the user scrolls, which gets really irritating.</p>
  
  <p>Is there a way I can detect scroll only once OR toggle only once?</p>
  
  <pre><code>$(window).scroll(function () {
  var width = $(document).width() - 205;
  var height = $(document).height();
    $('#me').animate({
      marginLeft: width,
      width: '22px',
      height: 'toggle',
      borderLeftWidth: "10px",
      borderRightWidth: "10px"    
    }, 1000, function() {
      $("#me:first").css("margin-top","-90px");
      var div = $('#me');
      $('#me h1').css("font-size","30px");
      var start = $(div).offset().top;
      $(div).css("height", height);
      $.event.add(window, "scroll", function() {
          var p = $(window).scrollTop();
          $(div).css('position',((p)&gt;start) ? 'fixed' : 'static');
          $(div).css('top',((p)&gt;start) ? '0px' : '');
      });
    });
  });
  </code></pre>