Question

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

这是代码和链接的链接。页：

$(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

部分完成后，锚定图像会向上移动

1 个答案: