javascript onscroll淡出同一个类，但有不同的div

Question

我是JavaScript的新手，我想学习新的东西。

我的代码有问题：为什么我的div会同时消失。

我只是想问一下如何使用相同的div名称淡化不同的class。有人帮助我并向我解释。

提前致谢。

使用Javascript：

$(window).scroll(function(){
  if ($( "div.fade" ).offset().top - $(window).scrollTop() <= 100){
       $('.fade').addClass( "fade-in");
  }
  else {
       $('.fade').removeClass("fade-in");
  }
});

这是JSfiddle

Answer 1

onscroll = function () {
    var scrollTop = $(this).scrollTop() ;

    $("div.fade").each(function(){
         if(($(this).offset().top - scrollTop) <= 100){
            $(this).toggleClass("fade-in");
         }
    })
}

Answer 2

您需要选择哪个 div与您要淡入/淡出的班级fade。

您可以使用eq()选择器：

$(window).scroll(function () {
    if ($("div.fade").offset().top - $(window).scrollTop() <= 100) {
        $('.fade:eq(0)').addClass("fade-in"); //eq(0) chooses the FIRST div with this class on the page
    } else {
        $('.fade').removeClass("fade-in");
    };
});

所以这段代码只会淡化第一个div fade类。

fiddle