Fehler beim Umwandeln einer einfachen jQuery-Funktion in jede

Question

Dies sollte ein ziemlich einfacher sein - Ich habe ein sehr einfaches Skript geschrieben, das erkennt, wenn ein Bild mit spezifischem Klassennamen auf dem Bildschirm durch Scrollen erscheint. Wenn das Bild angezeigt wird, wird eine Klasse hinzugefügt, die die CSS-Animation für Deckkraft und Bewegung auslöst.

Das funktioniert alles gut, aber ich will das für mehrere Bilder auf der gleichen Seite funktionieren. Ich habe versucht, jedes() sowohl innerhalb als auch außerhalb der Scroll-Funktion zu verwenden, und es bricht das Skript. Ich glaube, ich bin auf dem richtigen Weg, aber die Variablen, die verwendet werden, um zu erkennen, wann das Bild auf dem Bildschirm erscheint, werfen mich ab, denke ich, da ich $ (this) nicht wie normalerweise mit jeder() -Funktion verwenden kann.

jQuery Script ist hier:

// 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 des Originals, funktionierende Skript (funktioniert nur auf dem ersten Bild):

https://jsfiddle.net/gv6qzxph/

Vielen Dank Jungs.

zu enthalten gebrochen Versuch Editiert:

// 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

auf Ihrem ersten Versuch haben Sie nur Auslöser für den ersten <div> definiert. Im zweiten Versuch, den Sie scroll innerhalb der Schleife binden möchten, würde es eher die Leistung töten. Sie müssen überprüfen, ob Ihr Element beim Scrollen sichtbar ist. Bitte finden Version arbeiten unter

// 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; 
    }; 

und Arbeits jsfiddle hier: https://jsfiddle.net/swnuro9z/1/

Prost

Answer 2

Nicht sicher sind Sie wirklich brauchen diese Verbesserung. Wie auch immer, ich hatte Zeit und spielte damit :) und hier ist es.

1. Verwenden Sie jQuery zum Anzeigen/Verbergen ohne Verwendung von Klassen.

2. HIDE (zurück zu Opazität: 0), wenn nach oben scrollen.

   $(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