チェック要素がisOnScreenを使用してビューポートにある

Question

私は各ポスト（Tumblr）のクラス ".dida"を持つスパン内のテキストを取得し、特定の場所（idが " ＃bottom-stripe "）、ポストの画像（" .miniatura "クラスのimg）がビューポートで50％の場合にのみ表示されます。

私は、ビューポート上の要素を検出するために、この外部ライブラリを使用しています： https://github.com/moagrius/isOnScreen

これは私のJSコードです：

<script> 
$(window).on('load scroll', function(e) { 
    $("img.miniatura").each(function() { 
     if ($(this).isOnScreen(0.5, 0.5)) { 
      var dida = $(".dida").each(function() { 
       $(this).html(); 
      }); 
      $("#bottom-stripe").empty(); 
      $("#bottom-stripe").append(dida); 
     } 
    }); 
}); 
</script> 

スクリプトは一緒にすべてのキャプションを取得し、＃でそれらすべてを追加ボトムストライプdiv。 img.miniaturaがビューポートで50％の場合にのみこれを実行します。

ここで間違いはありますか？ ご協力いただきありがとうございます！

Answer 1

現在、どの画像がビューポートにあるかを検出したいようです。

$("img.miniatura").each(function() { 
     if ($(this).isOnScreen(0.5, 0.5)) { 
     var text = $(this).parents('div').find('.number').html(); 
     //Detect which image is in viewport 
     $('#bottom-stripe').html(text); 
     } 
}); 

私は、現在のビューポートの画像を検出するために、実施例を参照してください、numberクラス下の画像のテキストを追加しました。

// https://github.com/moagrius/isOnScreen 
 
!function(t){t.fn.isOnScreen=function(o,e){(null==o||"undefined"==typeof o)&&(o=1),(null==e||"undefined"==typeof e)&&(e=1);var i=t(window),r={top:i.scrollTop(),left:i.scrollLeft()};r.right=r.left+i.width(),r.bottom=r.top+i.height();var f=this.outerHeight(),n=this.outerWidth();if(!n||!f)return!1;var h=this.offset();h.right=h.left+n,h.bottom=h.top+f;var l=!(r.right<h.left||r.left>h.right||r.bottom<h.top||r.top>h.bottom);if(!l)return!1;var m={top:Math.min(1,(h.bottom-r.top)/f),bottom:Math.min(1,(r.bottom-h.top)/f),left:Math.min(1,(h.right-r.left)/n),right:Math.min(1,(r.right-h.left)/n)};return m.left*m.right>=o&&m.top*m.bottom>=e}}(jQuery); 
 

 
// show only captions related to visible images 
 
$(window).on('load scroll', function(e) { 
 
    $("img.miniatura").each(function() { 
 
     if ($(this).isOnScreen(0.5, 0.5)) { 
 
     var text = $(this).parents('div').find('.number').html(); 
 
     //Detect which image is in viewport 
 
     $('#bottom-stripe').html(text); 
 
     } 
 
    }); 
 
});

.info ul.tags { 
 
    display: none; 
 
} 
 

 
#bottom-stripe { 
 
    width: 100%; 
 
    height: auto; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    background-color: #ddd; 
 
}

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

 
<div class="post"> 
 
    <div class="post-content"> 
 
    <div class="media"> 
 
     <a href="#"> 
 
      <img class="miniatura" src="https://placehold.it/350x300"> 
 
     </a> 
 
     <div class="number">First Image</div> 
 
     <div class="info"> 
 
     <ul class="tags"> 
 
      <li>FirstWord</li> 
 
      <li>SecondWord</li> 
 
      <li>ThirdWord</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="post"> 
 
    <div class="post-content"> 
 
    <div class="media"> 
 
     <a href="#"> 
 
      <img class="miniatura" src="https://placehold.it/350x300"> 
 
     </a> 
 
     <div class="number">Second Image</div> 
 
     <div class="info"> 
 
     <ul class="tags"> 
 
      <li>FirstWord</li> 
 
      <li>SecondWord</li> 
 
      <li>ThirdWord</li> 
 
      <li>FourthWord</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="post"> 
 
    <div class="post-content"> 
 
    <div class="media"> 
 
     <a href="#"> 
 
      <img class="miniatura" src="https://placehold.it/350x300"> 
 
     </a> 
 
     <div class="number">Third Image</div> 
 
     <div class="info"> 
 
     <ul class="tags"> 
 
      <li>FirstWord</li> 
 
      <li>SecondWord</li> 
 
      <li>ThirdWord</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="bottom-stripe">test</div>