Question

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

这一切都运行正常，但我希望这适用于同一页面上的多个图像。我已经尝试在scroll函数的内部和外部使用each（），它会破坏脚本。我相信我在正确的轨道上，但用于检测图像何时出现在屏幕上的变量让我失去了我想，因为我不能像往常一样使用$（this）和each（）函数

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小提琴（仅适用于第一张图片）：

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

不确定你真的需要这种改进。无论哪种方式，我都没有时间和它一起玩:)在这里它是。

使用jQuery显示/隐藏w / o使用类。

向上滚动时隐藏（回到不透明度：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

Answer 2

在您第一次尝试时，您只为第一个<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/

干杯

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

2 个答案: