使用 isOnScreen 检查元素是否在视口中

Question

我正在开发一个函数，该函数应该将每个 post (Tumblr) 的 class “.dida” 文本放入一个跨度内，并将它们附加到特定位置（一个 div with id "#bottom-stripe") 仅当 posts（带有 class ".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>

该脚本将所有字幕放在一起并将它们全部附加到#bottom-stripe 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 class 下添加了图像文本，请参阅检测当前视口图像的工作示例。

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

使用 isOnScreen 检查元素是否在视口中

Check element is in view port using isOnScreen

javascript

jquery

append

find

viewport