更改 div 内容的位置

Posted 2023-03-06

【中文标题】更改 div 内容的位置

【英文标题】：Change a div content in position

【发布时间】：2016-06-27 16:12:40

【问题描述】：

我想根据 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>

非常感谢！

【参考方案1】：

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

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();

【参考方案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");
        
    );

【讨论】：

您是否已将data-id 添加到 div？像这样：<div class="image i_one" data-id="1"></div> 并检查 jquery 库是否已完全加载。

和hidden 应声明为display: none