title: jQuery append only once
body: <p>So I have this: </p>
  
  <pre><code>jQuery("document").ready(function($){
  
  var nav = $('#nav');
  var logo = '&lt;img src="img/logo.png" /&gt;';
  
  $(window).scroll(function () {
      if ($(this).scrollTop() &gt; 136) {
          nav.addClass("nav-f");
          nav.append(logo);
      } else {
          nav.removeClass("nav-f");
          nav.remove(logo);
      }
  });
  
  });
  </code></pre>
  
  <p>When scrolling I'm trying to make the navigation to be fixed, which works, but I also want to add a  tag with the logo image in the #nav div, which also works but it appends on every scroll so when scrolling I get like 100 images of the logo. </p>
  
  <p>How can I make it to append only once and when it's not scrolled more than 136px to be removed?</p>