title: Show div when I scroll past div ID
body: <p>So I think this is a pretty straight forward question, but I could not find the correct answer I'm looking for on here. So please forgive me if this question has been asked before. </p>
  
  <p>I have a section <code>section id="front-page-item-4"</code>. And in this <code>section</code> I have a div called <code>about-us-short</code>. What I would like is to have the div <code>about-us-short</code> <code>fade-in</code> when you scroll past <code>front-page-item-4</code>. I found this piece of code, but this just fades the div <code>about-us-short</code> in, and not when I scroll past <code>front-page-item-4</code>. </p>
  
  <p>What am I doing wrong? It looks like this code is looking for the <code>height</code> of the div <code>front-page-item-4</code> but I don't know the height of this div nor the offset... </p>
  
  <pre><code>$(window).scroll(function () {
      console.log($(window).scrollTop());
      var topDivHeight = $("#front-page-item-4").height();
      var viewPortSize = $(window).height();
  
      var triggerAt = 150;
      var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
  
      if ($(window).scrollTop() &gt;= triggerHeight) {
          $('.about-us-short').css('visibility', 'visible').hide().fadeIn();
          $(this).off('scroll');
      }
  });
  </code></pre>
  
  <p>Thanks for the help in advance... </p>