在另一個div中滾動時更改一個div的內容

Question

我有兩個div，其中一個帶有圖像，另一個帶有文本（css overflow propriety）。我想知道如何在第一個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'); 
      } 
     } 
    }); 
});