jquery - 每次窗口滚动时，如何为具有特定类的每个元素调用一个函数(jquery))

Question

我正在尝试制作一个滚动触发的函数，该函数根据滚动位置从一侧滑入元素。我希望它在所有带有“my-class”的元素上运行，但目前我的代码似乎认为“this”是窗口，而不是每个“my-class”元素。我调用函数的方式有问题吗？如何让每个元素运行函数？

这是基本的 html 结构:

<div class="wrapper">
    <div class="my-class"></div>
    <div class="not-my-class"></div>
    <div class="my-class"></div>
    <div class="not-my-class"></div>
    <div class="my-class"></div>
</div>

一些CSS:

.wrapper {
    width: 100%;
    height: 100%;
}
.my-class, .not-my-class {
    width: 100%;
    height: 350px;
    margin-top: 10px;
    background-color: #888888;
}

和jquery:

function fadeIn($element) {
$scrollTop = $(window).scrollTop();
$windowHeight = $(window).height();
$pageHeight = $('body').height();
$elementHeight = $($element).height();
$baseOffset = $($element).offset().top;
$length = 100;
$finalOffset = $baseOffset + ( $elementHeight / 2 );
$current = ( $scrollTop - ( $finalOffset - ($windowHeight / 2 ) - ( $length / 2 ) ) ) / $length;
if ($current > 1) {
    $current = 1;
}
else {
    if ($current < 0) {
        $current = 0;
    }
    else {}
}
$opacity = $current;
$slide = ( $current * 100 ) - 100;
$(this).css({"opacity": $opacity, "left": $slide, "position": "relative"});
}
$(window).on("load resize scroll",function(){
    $('.my-class').each(fadeIn(this));
});

Answer 1

你需要像这样传入一个函数:

$('.my-class').each(function(){ 
  fadeIn(this) 
});

所以 this 指的是 .my-class 元素而不是窗口