JSFiddle - React, Tailwind, and code Playground

by davidegiorgetta

HTML

<div class="post">
  <div class="post-content">
    <div class="media">
      <a href="#">
          <img class="miniatura" src="http://66.media.tumblr.com/75acbc7a14897eed8d1ef925f1dc7b4e/tumblr_oe2bo7JhpL1vgq2yao1_540.jpg">
      </a>
      <div class="number"></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="http://66.media.tumblr.com/75acbc7a14897eed8d1ef925f1dc7b4e/tumblr_oe2bo7JhpL1vgq2yao1_540.jpg">
      </a>
      <div class="number"></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="http://66.media.tumblr.com/75acbc7a14897eed8d1ef925f1dc7b4e/tumblr_oe2bo7JhpL1vgq2yao1_540.jpg">
      </a>
      <div class="number"></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"></div>

CSS

.info ul.tags {
  display: none;
}

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

JavaScript

// 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)) {
          $( "#bottom-stripe" ).empty();
          $( "#bottom-stripe" ).append($(this).find('.info').html());
      } 
    });
});