Auslöser beim Scrollen nach DOM-Element

Question

Ich versuche, Aktionen auszulösen, wenn der Benutzer in verschiedene DOM-Elemente scrollt (ich brauche dies für verschiedene Bildschirmgrößen reagieren). Ich bekomme zuerst die Positionen der jeweiligen Elemente mit offset().top dann berechne ich die Position der Rolle mit scrollTop(). Es funktioniert etwas, aber die Aktion wird zu weit nach dem Start des DOM-Elements ausgelöst. Ich habe alle Polsterung und Margen entfernt ...

var hT = $('#bioAG').offset().top; 
var hT2 = $('#bioTM').offset().top; 
var hT3 = $('#contact').offset().top; 

$(window).scroll(function() { 
    var ws = $(window).scrollTop()   
    if (ws > hT) { 
    $("#bioAG").addClass("fade-in"); 
     } else if (ws > hT2){ 
     $("#bioTM").addClass("fade-in"); 
     } else if (ws > hT3) { 
      $("#contact").addClass("fade-in"); 
      } else {console.log('none');}; 

}) `

Answer 1

Auf Spirale (Last und die Größe) berechnen die .top Position jedes data-fadein Elemente.
filter() Dann geben Sie die Elemente zurück, deren obere Position kleiner als die Fensterhöhe ist - und fügen diesen Elementen die gewünschte Klasse hinzu.

var $ele = $("[data-fadein]"), 
 
    $win = $(window); 
 

 
function fadeInEl() { 
 

 
    var h = $win.height(); 
 

 
    $ele.filter(function() { 
 
    return this.getBoundingClientRect().top < h; 
 
    }).addClass("fade-in"); 
 

 
} 
 

 

 
// Call the above function on: 
 
$win.on("load resize scroll", fadeInEl);

*{box-sizing:border-box;} 
 
html,body{height:100%;margin:0;} 
 

 

 
[data-fadein] { 
 
    height:100vh; 
 
    opacity:0; 
 
    transition: 2s; 
 
} 
 
.fade-in { 
 
    opacity:1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div data-fadein id="bioAG" style="background:#0af">ag</div> 
 
<div data-fadein id="bioTM" style="background:#f0a">tm</div> 
 
<div data-fadein id="contact" style="background:#0fa">contact</div>

https://developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect