Show div when I scroll past div ID

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.

I have a section section id="front-page-item-4". And in this section I have a div called about-us-short. What I would like is to have the div about-us-shortfade-in when you scroll past front-page-item-4. I found this piece of code, but this just fades the div about-us-short in, and not when I scroll past front-page-item-4.

What am I doing wrong? It looks like this code is looking for the height of the div front-page-item-4 but I don't know the height of this div nor the offset...

$(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() >= triggerHeight) {
        $('.about-us-short').css('visibility', 'visible').hide().fadeIn();
        $(this).off('scroll');
    }
});

Thanks for the help in advance...