javascript - 在屏幕上出现具有响应高度的特定 div 后获取操作

Question

我需要使 DIV 内的元素仅在出现在屏幕上后才进行动画处理。该操作不是根据页面滚动的 X 次发生，而是在 DIV 顶部出现在屏幕上时发生。 DIV 具有 100% 的屏幕高度。

现在就按照我的代码操作:

var text_area_1 = $('.text_area_1');
var passo_img_1 = $('.passo_img_1');

var text_area_2 = $('.text_area_2');
var passo_img_2 = $('.passo_img_2');

var text_area_3 = $('.text_area_3');
var passo_img_3 = $('.passo_img_3');

$(window).scroll(function () {

    if ($(this).scrollTop() > 400) { text_area_1.addClass("anima-left");}
    if ($(this).scrollTop() > 400) { passo_img_1.addClass("anima-right");}

    if ($(this).scrollTop() > 750) { text_area_2.addClass("anima-left");}
    if ($(this).scrollTop() > 750) { passo_img_2.addClass("anima-right");}

    if ($(this).scrollTop() > 1150) { text_area_3.addClass("anima-left");}
    if ($(this).scrollTop() > 1150) { passo_img_3.addClass("anima-right");}
}
);

数字“400”、“750”、“1150”。它们实际上需要是“DIV x 的顶部”、“DIV y 的顶部”、“DIV z 的顶部”。

这个怎么写？

Answer 1

$(window).scroll(function () {

    if ($(this).scrollTop() > $('div#x').position().top) { text_area_1.addClass("anima-left");}
    if ($(this).scrollTop() > $('div#x').position().top) { passo_img_1.addClass("anima-right");}

    if ($(this).scrollTop() > $('div#y').position().top) { text_area_2.addClass("anima-left");}
    if ($(this).scrollTop() > $('div#y').position().top) { passo_img_2.addClass("anima-right");}

    if ($(this).scrollTop() > $('div#z').position().top) { text_area_3.addClass("anima-left");}
    if ($(this).scrollTop() > $('div#z').position().top) { passo_img_3.addClass("anima-right");}
    }
);