Javascript 滚动具有相同类名的元素时的jQuery动画

当

元素（$（.box fadeTop））

从底部到达页面的1/3时，我有一个简单的动画
事情是这样的：

if（滚动时元素从底部到达页面的1/3）{
//做点什么（显示内容的CSS）
}

它工作得很好，但问题是当有多个

元素

具有相同的

类名$（.box fadeTop）。


一旦我到达第一个
元素
，它将运行所有的函数。




如何根据每个
元素设置函数（如果有多个）
位置）？




请全屏打开示例


var fadeTop=$（“.box fadeTop”）；
var fadeTop.bottom=（fadeTop.offset（）.top-（window.screen.height））+window.screen.height/3.33；
$（窗口）。滚动（函数（）{
var winScrollTop=$（窗口）.scrollTop（）；
如果（winScrollTop>=FadeToBottom）{
$（'.box fadeTop'）.css({
转换：“转换（0，0）”，
转换：“所有1”，
不透明度：“1”
}，500，‘轻松’；
}
});
*，*：之前，*：之后{
保证金：0；
填充：0；
-webkit框大小：边框框；
框大小：边框框；
}
身体{
最小高度：3000px；
}
.box fadeTop{
宽度：200px；
高度：200px；
边界半径：4px；
盒影：0 1px 1px#888；
保证金：0自动；
不透明度：0；
转换：转换（50px，-50px）；
}
它将所有元素都作为目标，因为$（“.box fadeTop”）是该类中所有元素的数组，您只希望将距离底部33%的元素作为目标

在这种情况下，JavaScript的IntersectionObserver是完美的解决方案。IntersectionObserver监视元素相对于窗口（或您指定的任何其他对象）的位置，并根据元素是否相交执行操作

// Get an array of your "watched" elements
let boxes = document.querySelectorAll('.box-fadeTop');

// Set an observer to watch their position, and run some code if they are at 33% from the bottom of the viewport
let observer = new IntersectionObserver(function (entries, self) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            adjustCss(entry.target)
            // Stop watching them if we don't want to repeat
            self.unobserve(entry.target);
        }
    });
}, { rootMargin: '0px 0px -33% 0px' });

// Tell each individual "box" to be watched
boxes.forEach(box => {
    observer.observe(box);
});

// Function to run on the item that is intersecting
function adjustCss (box) {
    jQuery(box).css({
        transform: 'translate(0, 0)',
        transition: 'all 1s',
        opacity: '1',
        background: 'red'
    }, 500, 'ease');
}

它的目标是所有元素，因为$（“.box fadeTop”）是该类中所有元素的数组，您只希望目标元素距离底部33%

在这种情况下，JavaScript的IntersectionObserver是完美的解决方案。IntersectionObserver监视元素相对于窗口（或您指定的任何其他对象）的位置，并根据元素是否相交执行操作

// Get an array of your "watched" elements
let boxes = document.querySelectorAll('.box-fadeTop');

// Set an observer to watch their position, and run some code if they are at 33% from the bottom of the viewport
let observer = new IntersectionObserver(function (entries, self) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            adjustCss(entry.target)
            // Stop watching them if we don't want to repeat
            self.unobserve(entry.target);
        }
    });
}, { rootMargin: '0px 0px -33% 0px' });

// Tell each individual "box" to be watched
boxes.forEach(box => {
    observer.observe(box);
});

// Function to run on the item that is intersecting
function adjustCss (box) {
    jQuery(box).css({
        transform: 'translate(0, 0)',
        transition: 'all 1s',
        opacity: '1',
        background: 'red'
    }, 500, 'ease');
}

看看这个。它按预期工作


$（窗口）。滚动（函数（）{
$（“.container.box fadeTop”）。每个（函数（）{
if（$（this）.isInViewport（））{
$（$（this））.css({
转换：“转换（0，0）”，
转换：“所有1”，
不透明度：“1”
}，500，‘轻松’；
}
});
});
$.fn.isInViewport=函数（）{
var elementTop=$（this）.offset（）.top；
var elementBottom=elementTop+$（this.outerHeight（）；
var viewportTop=$（window.scrollTop（）；
var viewportBottom=viewportTop+$（window）.height（）；
返回elementBottom>viewportTop&&elementTop
*，*：之前，*：之后{
保证金：0；
填充：0；
-webkit框大小：边框框；
框大小：边框框；
}
身体{
最小高度：3000px；
}
.box fadeTop{
宽度：200px；
高度：200px；
边界半径：4px；
盒影：0 1px 1px#888；
保证金：0自动；
不透明度：0；
转换：转换（50px，-50px）；
}
看看这个。它按预期工作


$（窗口）。滚动（函数（）{
$（“.container.box fadeTop”）。每个（函数（）{
if（$（this）.isInViewport（））{
$（$（this））.css({
转换：“转换（0，0）”，
转换：“所有1”，
不透明度：“1”
}，500，‘轻松’；
}
});
});
$.fn.isInViewport=函数（）{
var elementTop=$（this）.offset（）.top；
var elementBottom=elementTop+$（this.outerHeight（）；
var viewportTop=$（window.scrollTop（）；
var viewportBottom=viewportTop+$（window）.height（）；
返回elementBottom>viewportTop&&elementTop
*，*：之前，*：之后{
保证金：0；
填充：0；
-webkit框大小：边框框；
框大小：边框框；
}
身体{
最小高度：3000px；
}
.box fadeTop{
宽度：200px；
高度：200px；
边界半径：4px；
盒影：0 1px 1px#888；
保证金：0自动；
不透明度：0；
转换：转换（50px，-50px）；
}

对于第一个元素和等式（1）或等式（2），您可以分别使用其索引$（“.box fadeTop:eq（0）”）访问相同的类。对于第一个元素和等式（1）或等式（2），您可以分别使用其索引$（“.box fadeTop:eq（0）”）访问相同的类。