停止从重叠的页脚滚动div

Question

有没有办法让名为#middlecta的div在到达#footer时停止滚动？

FIDDLE：

http://jsfiddle.net/BP6rq/1522/

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");
});

Answer 1

你肯定想玩CSS。设置100px的保证金可能是也可能不是一个好主意。但是，这应该让你至少在正确的轨道上思考。

var pointOne = $("#form").offset().top;
var pointTwo = $('#footer').position().top;
var $midCta = $("#middlecta");
$(window).on("scroll", function () {
    $.fx.speeds.xslow = 750;
    if ($(this).scrollTop() > pointOne) {
        $midCta.fadeIn('xslow').addClass('fixed');
    } else {
        $midCta.fadeOut('xslow').removeClass('fixed').hide();
    }
    if ($midCta.offset().top > pointTwo) {
        $midCta.css('bottom', 150);
        $midCta.fadeOut('xslow').removeClass('fixed');
    }

    $midCta.addClass("mob");
});

http://jsfiddle.net/BP6rq/1523/