title: jQuery scroll function only works once
body: <p>I am trying to add a class to the header if the user scrolls past the div <code>#home</code> - and remove the class when you scroll back to the top. </p>
  
  <p>The issue is, when you scroll past the div it adds the class but when you keep scrolling and then scroll back up, the class does not get removed. The event is only firing once...</p>
  
  <p>I created this jsFiddle here - <a href="https://jsfiddle.net/breezy/9evksr7y/" rel="nofollow">https://jsfiddle.net/breezy/9evksr7y/</a></p>
  
  <p>It works in my jsFiddle file but not on my actual web page, I've also tried this...</p>
  
  <pre><code>$(window).on( 'scroll', function() {
  
          var header = $('#header'),
              target = $("#home").offset().top;
  
          var interval = setInterval(function() {
              if ($(window).scrollTop() &gt; 400) {
                  // alert("made it!");
  
                  header.addClass('fixed');  
  
                  clearInterval(interval);
  
              } else {
  
                  header.removeClass('fixed');
  
              }
  
          }, 250);
  
  
      });
  </code></pre>
  
  <p>But it still does not work. Any idea what I am doing wrong?</p>
  
  <p>Thanks</p>
  
  <hr>
  
  <p><strong>Edit:</strong> The issue was that one of my other functions in the same document was conflicting w/ this scroll function.</p>