更改位置中的div内容

Question

我想根据div位置更改文本。 一张图片胜过千言万语，所以这里是我想要的一个gif：

这是我的代码：

https://jsfiddle.net/c0mk2wto/4/

<div class="image i_one"></div>
<div class="image i_two"></div>
<div class="image i_three"></div>

<div class="text t_one">One</div>
<div class="text t_two">Two</div>
<div class="text t_three">Three</div>

非常感谢！

Answer 1

尝试这个（它显示了如何实现它的主要想法）：https://jsfiddle.net/c0mk2wto/8/

<img src="[*post_image*-replace this with your image param output]" />

Answer 2

我认为添加数据属性可以更轻松地解决您的问题:) https://jsfiddle.net/c0mk2wto/10/

var targetTop = $(".t_one").position().top;

$(document).ready(function() {
    scrollAnimate(); // for init
}).scroll(function() {
    scrollAnimate();
});

function scrollAnimate() {
    var _scrollTop = $(this).scrollTop();

    $('.text').addClass("hidden");

    $(".image").each(function() {

        if(targetTop >= $(this).position().top - _scrollTop &&
           targetTop <= $(this).position().top + $(this).height() - _scrollTop) {

            var id = $(this).data("id");
            $(".text[data-id=" + id + "]").removeClass("hidden");
        }
    });
}