无法将一个简单的 jQuery 函数转换为每个函数

Question

这应该是一个相当简单的脚本 - 我编写了一个非常基本的脚本，用于检测具有特定 class 名称的图像何时通过滚动出现在屏幕上。当图像出现时，将向其添加 class 以触发不透明度和移动 CSS 动画。

一切正常，但我希望它适用于同一页面上的多张图片。我已经尝试在滚动函数的内部和外部使用 each() 并且它破坏了脚本。我相信我走在正确的轨道上，但是我认为用于检测图像何时出现在屏幕上的变量让我失望，因为我不能像通常使用 each() 函数那样使用 $(this)。

jQuery 脚本在这里：

  // Setup
  $(".appear").addClass("off");

  objectOffset = $(".appear").offset().top;
  winHeight = $(window).height();
  trigger =  objectOffset - winHeight;

  $(window).scroll(function() {
    if ($(window).scrollTop() > trigger) {

      $(".appear").removeClass("off");
      $(".appear").addClass("on");

    }

  });

原始功能脚本的 JS Fiddle（仅适用于第一张图片）：

https://jsfiddle.net/gv6qzxph/

非常感谢大家。

编辑为包括失败的尝试：

  // Setup
  $(".appear").addClass("off");

  $(".appear").each(function() {

    objectOffset = $(this).offset().top;
    winHeight = $(window).height();
    trigger =  objectOffset - winHeight;

    $(window).scroll(function() {
        if ($(window).scrollTop() > trigger) {

        $(this).removeClass("off");
        $(this).addClass("on");

        }

    });

  });

Answer 1

第一次尝试时，您只为第一次 <div> 定义了触发器。在第二次尝试中，您试图在循环内绑定滚动，这会破坏性能。您需要的是检查您的元素在滚动时是否可见。请在下面找到工作版本

  // Setup
  $(".appear").addClass("off");

  $(window).scroll(function() {

        $('.appear').each(function() {
            if(isVisible(this)){
                $(this).removeClass('off').addClass('on');
          }
      });

  });

  function isVisible(elem) {
    var $elem = $(elem);
    var $window = $(window);

    var elemTop = $elem.offset().top;
    var docViewTop = elemTop - $window.height();

    return $window.scrollTop() > docViewTop;
  };

在这里工作 jsfiddle：https://jsfiddle.net/swnuro9z/1/

干杯

Answer 2

不确定您是否真的需要此改进。无论哪种方式，我都没有时间玩它:)就在这里。

使用 jQuery 到 display/hide w/o 使用类。

向上滚动时隐藏（返回 opacity:0）。

$(window).scroll(function(){
    var winHeight = $(window).height();
    var scrollTop = $(window).scrollTop();

    $('.appear').css('opacity',function(){            // change opacity only on the 'appeared' items
        elmTop        = $(this).offset().top;
        scrollNeeded  = elmTop - winHeight;           // scrolling needed for $(this) to appear     
        return (scrollTop > scrollNeeded )? 1 : 0 ;   // if $(this) appear on the screen return 1 else 0
    });

});

See Demo

无法将一个简单的 jQuery 函数转换为每个函数

Trouble converting a simple one off jQuery function to each

each

jquery