如果视口

Question

我希望仅在视口中可见时淡入元素。为此，我使用isOnScreen()函数。它工作正常，但只有一个元素，如果页面上有更多具有相同类的元素，它只适用于第一个元素。

如何对页面上的所有元素使用函数isOnScreen()？

例如，我在页面开头有一个元素.quote，在页面末尾有一个元素。第一个元素工作正常，底部元素没有。

我尝试使用$('.quote').each(function() {和isOnScreen()'内部，但它不起作用。

修改

我找到了解决方案，请参阅下面的答案。

$.fn.isOnScreen = function(){

        var win = $(window);

        var viewport = {
            top : win.scrollTop(),
            left : win.scrollLeft()
        };
        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();

        var bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();

        return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

    };

    $(window).scroll(function() {

        if ($('.quote-container').isOnScreen()) {
            $('.quote').addClass('fade-in');
        } else {
            $('.quote').removeClass('fade-in');
        }
    });

.main-container {
  height: 2000px;
}
.quote-container {
    width: 100%;
    background-color: yellow;
    margin: 0;
}
.quote {
    font-size: 175%;
    font-style: italic;
    text-align: right;
    margin: 0;
    padding: 35px 215px;
}
.page-content {
    width: 100%;
    background-color: lightblue;
    margin: 0;
}
.page-content p {
    position: relative;
    top: 50%;
    margin-left: 230px;
    font-size: 220%;
    margin-top: 0;
    margin-bottom: 0;
}
.big {
  height: 1000px;
}
.little {
  height: 700px;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;
    -webkit-animation:fadeIn ease-out 1;
    -moz-animation:fadeIn ease-out 1;
    animation:fadeIn ease-out 1;

    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1.6s;
    -moz-animation-duration:1.6s;
    animation-duration:1.6s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
  <div class="page-content little">
    <p>Page Content</p>
  </div>
  <div class="quote-container">
    <p class="quote">Lorem Ipsum.</p>
  </div>
  <div class="page-content big">
    <p>Page Content</p>
  </div>
  <div class="quote-container">
    <p class="quote">Dolor sit amet.</p>
  </div>
  <div class="page-content little">
    <p>Page Content</p>
  </div>
</div>

Answer 1

你可以这样做：

$('.quote-container').each(function() {
  $('.quote').toggleClass('fade-in', $(this).isOnScreen());
});

这会在每个isOnScreen元素上调用.quote-container方法，并根据返回的值在.quote上将类切换为true / false。

假设您希望在视口中的项目为.quote-container，并且您要添加/删除fade-in类的多个节点具有.quote类。我通过阅读你的if块来理解这种情况，虽然这些类的名称有点令人困惑，所以我可能会误解。如果是这样，请告诉我，我会调整答案。

Answer 2

我刚刚使用Luis Serrano的答案解决了一些变化。

  $('.quote-container').each(function() {
    if ($(this).isOnScreen()) {
        if ($(this).children('.fade-in').length < 1) {
        $(this).children().toggleClass('fade-in');
      }
    }
  });

这样.quote只会在视口中淡入一次。