Show div when I scroll past div ID
<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>