title: Hide Div on Scroll with JQuery
body: <p>I'm sure this is a trivial problem but I cannot seem to figure it out. I'm trying to fade a side bar in and out, and because I have a few of them in my website, I need to give them individual IDs for Javascript. </p>
  
  <p>This code works</p>
  
  <pre><code>$(window).on("scroll", function() {
      var scrollPos = $(window).scrollTop() - 100 ;
      if (scrollPos &lt; 100) {
          $("#menu").fadeOut();
      } else {
          $("#menu").fadeIn();
      }
  });
  </code></pre>
  
  <p>This doesn't </p>
  
  <pre><code>$(window).on("scroll", function() {
      var menu = document.getElementById("menu");
      var scrollPos = $(window).scrollTop() - 100 ;
      if (scrollPos &lt; 100) {
          menu.fadeOut();
      } else {
          menu.fadeIn();
      }
  });
  </code></pre>
  
  <p>In the latter piece, all I'm trying to do is assign a variable. </p>
  
  <p>Here's the fiddle: <a href="https://jsfiddle.net/gavinfriel/nhovvj6q/1/" rel="nofollow">https://jsfiddle.net/gavinfriel/nhovvj6q/1/</a></p>
  
  <p>Your help would be appreciated. </p>