Jquery 在位置中更改div内容

我想根据div位置更改文本。 一张图片抵得上千言万语，下面是我想要的gif：

这是我的代码：

一个
两个
三

非常感谢

试试这个（它展示了如何实现它的主要思想）：

---

我认为添加数据属性可以更轻松地解决您的问题：）

var targetTop=$（“.t_one”）.position（）.top；
$（文档）.ready（函数（）{
scrollAnimate（）；//用于初始化
}).scroll（函数（）{
滚动动画（）；
});
函数scrollAnimate（）{
var_scrollTop=$（this.scrollTop（）；
$（'.text'）.addClass（“隐藏”）；
$（“.image”）.each（函数（）{
如果（targetTop>=$（this）.position（）.top-\u&&
targetTop您是否已将
数据id
添加到div？如下所示：
并检查jquery库是否已完全加载。并且
隐藏的
应声明为
显示：无
<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>

var getDivClassByClass = function (className) {
    var divHash = {
      i_one: '.t_one',
      i_two: '.t_two',
      i_three: '.t_three'
    },
    key,
    value,
    classN = '';
    for (key in divHash) {
       console.log(className, key);
       if (className.indexOf(key) >= 0) {
         classN = divHash[key];
         break;  
       }
    }
    return classN;
};

var scroll = function () {
    var images = [].slice.call(document.querySelectorAll('.image'));
    var positions = images.map(function (image) {
       var box = image.getBoundingClientRect();
       return {
         imageClass: image.className,
         closestTop: Math.abs(box.top)
       };
    });
    positions.sort(function (p1, p2) {
            return p1.closestTop - p2.closestTop;
    });
    positions.forEach(function (pos, index) {
      var element = document.querySelector(getDivClassByClass(pos.imageClass));
      if (!index) {
         element.style.display = 'block';
      } else {
         element.style.display = 'none';
      }
    });

};

window.addEventListener('scroll', scroll, false);
scroll();

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