jquery - 部分完成后锚定图像向上移动

Question

我有一个脚本，当您继续滚动左侧的副本时，可以让图像留在屏幕上。在您到达左侧副本的末尾后，我需要有关使图像停止“锚定”的代码的帮助，这样它就不会覆盖在页面上的其余内容上。

这是代码和页面的链接：

http://jsfiddle.net/TheeAndre/yQKEH/5/

$(function () {
    var blogphotos = $('#blogphotos').offset().top;
    $(window).scroll(function () {
        if ($(window).scrollTop() > blogphotos) {
            $('#blogphotos').addClass("sticky");
        } else {
            $('#blogphotos').removeClass("sticky");
        }
    });
});

Answer 1

添加CSS：

.two_third {
    position: initial;
}
.sticky.stop {
    position: absolute;
}

将 ID 添加到您的表中（告诉 JS 何时停止滚动）：

<div class="one_full">
     <table width="800" border="0" cellspacing="0" cellpadding="0" id="stopScroll">

更改滚动功能：

$(window).scroll(function () {
    var winScroll = $(window).scrollTop();
    var stopScroll = $('#stopScroll').offset().top - $('#blogphotos').height();
    $('#blogphotos').removeClass("sticky stop");

    if (winScroll > blogphotos) {
        $('#blogphotos').addClass("sticky");
    }
    else {
        $('#blogphotos').removeClass("sticky");
    }

    if (winScroll > stopScroll) {
        $('#blogphotos').addClass("stop").css('top', stopScroll);
    }
    else {
        $('#blogphotos').removeClass("stop").css('top', 0);
    }
});

http://jsfiddle.net/samliew/yQKEH/11