Wenn unten ".hiddenpost" am oberen Bildschirmrand ist toggle es

Question

Ich musste nie fragen und fand immer die richtige Antwort selbst, aber heute muss ich hier fragen, weil ich nicht die richtige Antwort gefunden habe (sogar mit die erweiterte Suche).

So zu meinem Problem: Ich möchte ein Element umschalten, wenn der obere Teil des Bildschirms die Unterseite dieses Elements (mit jQuery natürlich) 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 screen's erreicht oben):

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

HTML (auf die wichtigen Dinge reduziert):

<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

Try this:

$(function(){ 
     $(window).on('scroll', function() { 
      var scrollPosition = $(window).scrollTop(); 
      $(".hiddenpost").each(function(){ 
       var divBottomPosition = $(this).offset().top + $(this).outerHeight(); 
       if (divBottomPosition < scrollPosition) $(this).slideToggle(); 
      }); 
     }); 
    }