have element stop scrolling when element reaches footer

Reformatted question. I've tried a few different solutions ; .stop() and by offsetting the height of the element and trying some funky positioning. However, since the element fades in and out it achieves the desired effect. Is there a way to have the element that fades in stop scrolling when it reaches the footer?

JSfiddle: http://ift.tt/1Brbu3r

var pointOne = $("#form").offset().top;
$(window).on("scroll", function () {
    $.fx.speeds.xslow = 750;
    if ($(this).scrollTop() > pointOne) {
        $("#middlecta").fadeIn('xslow').addClass('fixed');
    } else {
        $("#middlecta").fadeOut('xslow').removeClass('fixed').hide();
    }
    $("#middlecta-t").addClass("mob");
});