load - 別の div をスクロールしながら 1 つの div のコンテンツを変更する

Question

2 つの div があります。1 つは画像、もう 1 つはテキスト (css オーバーフローの妥当性) です。2番目のdivをスクロールしているときに、最初のdivの画像を変更する方法を知りたいです。たとえば、テキストをスクロールすると、最初の段落の後で画像が変化し、2 番目の段落の後に再び変化します。わかると思います。誰もこれを行う方法について考えを持っていますか?

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