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

数字＆＃34; 400＆＃34;，＆＃34; 750＆＃34;，＆＃34; 1150＆＃34;。他们实际上需要事实上是＃DIV顶部x＆＃34;，＆＃34;顶部D＆＃34;，＆＃34;顶部DIV z＆＃34;。

我该怎么写？

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

屏幕上显示具有响应高度的特定div后的操作

1 个答案: