Element umschalten, wenn seine Unterseite die obere Bildschirmseite erreicht

Question

Ich möchte ein Element umschalten, wenn der obere Teil des Bildschirms das untere Ende dieses Elements erreicht. Die Sache ist, meine Funktion funktioniert nicht und ich weiß nicht wie ich das lösen soll, ich habe wirklich lange im Internet gesucht aber konnte leider nichts finden. Könnten Sie mir bitte helfen habe ich es so wechseln:

$(".tablee").click(function() { 
    $(this).next().slideToggle(); 
}); 

jQuery (mein Versuch zu wechseln, wenn element's Boden erreicht screen's oben):

if (($(".hiddenpost").offset().bottom + $(".hiddenpost").height()) <= $(window).height()) { 
    $(this).slideToggle(); 
} 

HTML (reduziert auf die wichtigen Dinge):

<div class="parent"> 
    <div class="tablee" style="height:100px;"></div> 
    <div class="hiddenpost" style="height:400px;"></div> 
</div> 
<div class="parent"> 
    <div class="tablee" style="height:100px;"></div> 
    <div class="hiddenpost" style="height:400px;"></div> 
</div> 
<div class="parent"> 
    <div class="tablee" style="height:100px;"></div> 
    <div class="hiddenpost" style="height:400px;"></div> 
</div> 
... 

Answer 1

Um zu starten, verwenden Sie eine Klasse als Selektor. Wenn Sie im DOM ein Vielfaches dieser Klasse haben, stoßen Sie auf ein Problem.

Versuchen Sie entweder eine bestimmte Instanz der Klasse anzugeben oder führen Sie Ihre Methode für alle Klassen aus.

Unten, in meinem ungetesteten Beispiel, wenn ich scrolle, überprüfe ich jeden .hiddenpost um zu sehen, ob es in der gewünschten Position ist.

Sie können so etwas wie dies versuchen:

<Script> 
    $(function(){ 
    $("body").on("scroll",function(){ 
     $(".hiddenpost").each(function(){ 
     var x = $(this); 
     if ((x.offset().bottom + x.height()) <= $(window).height()) { 
      x.slideToggle(); 
     } 
     }); 
    }); 
}); 

</script>