Как добавить изображение, когда тег img меньше 100 сверху, используя jquery?

Question

Я хочу добавить изображение, когда пользователь прокручивает вниз и mdl-grid меньше 100 сверху.

Вот мой HTML

<div class="mdl-grid  mdl-shadow--2dp" style="margin-top:4px;">
    <div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--3-col-tablet mdl-cell--1-col-phone div-mobile">
        <div class="image-div" style="height:200px;width:200px;">
            <img class="image-tag" src="" style="height:200px;width:98px;" />
        </div>
    </div>

Jquery

$(window).scroll(function () {
    $('.mdl-grid').each(function () {
        var offsetTopPosition = $(this).offset().top - $(window).scrollTop();
        if (offsetTopPosition < 100) {
            $(this).find('img').attr('src', '/rec.jpeg');
        }
    });
});
</div>