javascript - 使用 isOnScreen 检查元素是否在视口(viewport)中

Question

我正在开发一个函数，该函数应该在每个帖子(Tumblr)的类“.dida”的范围内获取文本，并仅在以下情况下将它们 append 到特定位置(id为“#bottom-stripe”的div)帖子的图像(带有“.miniatura”类的 img)在视口(viewport)中占 50%。

我正在使用这个外部库来检测视口(viewport)上的元素: 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>

该脚本将所有标题放在一起，并将它们全部 append 到 #bottom-stripe div 中。我希望它仅当 img.miniatura 在视口(viewport)中占 50% 时才执行此操作。

关于错误在哪里有什么建议吗？非常感谢您的帮助!

Answer 1

您似乎想检测当前在视口(viewport)中的图像。

$("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 类下添加图像文本，请参阅工作示例来检测当前视口(viewport)图像。

// 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>