滚动一个div时更改一个div的内容 [英] Change content of one div while scrolling in another div

问题描述

我有两个div，其中一个带有图像，另一个带有文本(css溢出适当性).我想知道当我滚动第二个图像时如何在第一个div中更改图像.例如，当我滚动文本时，图像将在第一段之后更改，然后在第二段之后更改.我想你明白了.有没有人知道如何执行此操作?

I have two div's, one of them with an image and another one with text (css overflow propriety). I'd like to know how I can change the image in the first div while I am scrolling in the second one. For example, when I scroll the text, the image would change after the first paragraph, and again after the second paragraph. I think you understand. Does anyone have an idea on how to do this?

推荐答案

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

Using jQuery you use .offset to get the position of each text div and change the image depending on how far the user has scrolled. 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的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！