Question

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

Answer 1

使用jQuery，您可以使用.offset获取每个文本div的位置，并根据用户滚动的距离更改图像。 Here is an example of the concept

基本概念：

$('.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');
            }
        }
    });
});

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

1 个答案: