load - 在另一个 div 中滚动时更改一个 div 的内容

Question

我有两个 div，其中一个带有图像，另一个带有文本（css 溢出适当性）。我想知道如何在滚动第二个 div 时更改第一个 div 中的图像。例如，当我滚动文本时，图像会在第一段之后发生变化，在第二段之后再次发生变化。我想你明白了。有谁知道如何做到这一点？

Answer 1

使用 jQuery，您.offset可以获取每个文本 div 的位置并根据用户滚动的距离更改图像。这是一个概念的例子

基本概念：

$('.container').scroll(function () {
    var bottom_of_container = $('.container').scrollTop() + $('.container').height();
    $('.content').each(function (i) {
        var bottom_of_object = $(this).offset().top + $(this).outerHeight() + 500;
        if (bottom_of_container > bottom_of_object) {
            if ($('.content').eq(0).html() == $(this).html()) {
                $('.image').src = 'http://dummyimage.com/600x400/000/fff';
                    $('.image').css('background-color', 'red');
                }
            if ($('.content').eq(1).html() == $(this).html()) {
                $('.image').src = 'http://dummyimage.com/750x486/000/AAA.png&text=2';
                $('.image').css('background-color', 'blue');
            }
            if ($('.content').eq(2).html() == $(this).html()) {
                $('.image').src = 'http://dummyimage.com/750x486/000/AAA.png&text=3';
                $('.image').css('background-color', 'black');
            }
        }
    });
});