".hiddenpost" altındaki ekranın en üstündeyken

Question

Hiçbir zaman sormak zorunda kaldım ve her zaman doğru cevabı kendim buldum ama bugün burada sormak zorundayım çünkü doğru cevabı bulamadım çünkü gelişmiş arama).

Sorunuma göre: Ekranın üst kısmı bu öğenin altına ulaştığında bir öğeyi değiştirmek istiyorum (tabii ki jQuery ile). Mesele benim işim çalışmıyor ve bunu nasıl çözeceğimi bilmiyorum, gerçekten internette uzun bir süre aradım ama maalesef hiçbir şey bulamadım.

Lütfen bana yardım eder misiniz? Ben bunu böyle geçiş yapmak için kullandı:

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

jQuery (element's alt üst screen's ulaştıysa geçiş yapmak için benim deneyin):

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

HTML (önemli şeyler düşürüldü):

<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

bu deneyin:

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