title: JavaScript for hiding divs after passing a certain point on the page
body: <p>Right now, I have it so a button appears after scrolling a certain length down the page but once you click on the button and it brings you to #ordersection, I can't get the button to disappear (when it reaches #ordersection).  Right now, I have</p>
  <pre><code>var mediaQuery = window.matchMedia( &quot;(max-width: 768px)&quot; );
  if (mediaQuery.matches) {
      // window width is at less than 768px
      $(document).scroll(function () {
          var y = $(this).scrollTop();
          if (y &gt; 23500 &amp;&amp; y &lt; 40000) {
              $('.order-now-btn-a').fadeIn();
          } else {
              $('.order-now-btn-a').fadeOut();
          }
      });
  }
  else {
      // window width is greater than 768px
      $(document).scroll(function () {
          var y = $(this).scrollTop();
          if (y &gt; 1000 &amp;&amp; y &lt; 80000) {
              $('.order-now').fadeIn();
          } else {
              $('.order-now').fadeOut();
          }
      });
  } 
  </code></pre>
  <p>'''</p>