javascript onscroll fade 相同 class 但不同 div

Question

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

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

我只想问一下如何用相同的 class 淡出不同的 div name.can 谁能帮我解释一下。

提前致谢。

Javascript:

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

这里是 JSfiddle

Answer 1

你需要选择哪个div和classfade要淡化in/out.

您可以使用 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 class。

fiddle

Answer 2

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

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

javascript onscroll fade 相同 class 但不同 div

javascript onscroll fade same class but with different div

html

javascript

css

jquery

toggleclass

Javascript: