title: How to fade out some element when user scrolles to a specific block?
body: <p>I have a function that fades out some element when user comes to the end of a web page, no i need a function that will fade out an element when reaching some html block with a specific class('.s-footer').</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function hideMenu() {
      var mainMenu = $('.main-head');
       if  ($(document).scrollTop() == $(document).height() - $(window).height())  {
        mainMenu.fadeOut();
      }
      else {
        mainMenu.fadeIn();
      }
    }
    $(window).scroll(hideMenu);</code></pre>
  </div>
  </div>
  </p>