当类在视口中时显示元素

Question

我试图使div仅当某个类的元素在视口中可见时才显示。

我几乎是通过http://jsfiddle.net/blowsie/M2RzU/到达的

$(document).ready(function(){
    $('.myclass').bind('inview', function (event, visible) {
      if (visible == true) {
        // element is now visible in the viewport
        $(this).removeClass('myclass');
          alert('found h2!')
      } else {
        // element has gone out of viewport
         $(this).addClass('myclass');
      }
    });
});

但是正如您通过此编辑http://jsfiddle.net/deenbag/6D9x5/所见，每次具有该类的任何元素进入或退出视口时都会触发该事件，因此即使具有相关类的另一个元素是可见的。

我也一直在用这个插件弄乱，但不知道如何使它适用于我想做的事情。 http://opensource.teamdf.com/visible/examples/demo-basic.html

Answer 1

只需跟踪数组中的可见元素：

var visibleEls = [];
$('.myclass').bind('inview', function (event, visible) {
    if (visible == true) {
        // element is now visible in the viewport
        if(!~visibleEls.indexOf(this)) visibleEls.push(this);
    } else {
        // element has gone out of viewport
        var i=visibleEls.indexOf(this);
        if(~i) visibleEls.splice(i, 1);
    }
    $('body').toggleClass('red', !!visibleEls.length);
});

演示版

---

请注意，您可以将其简化为

var counter = 0;
$('.myclass').bind('inview', function (event, visible) {
    counter += visible*2-1;
    $('body').toggleClass('red', !!counter);
});

但这可能更容易出错。

演示版

Answer 2

由于我没有足够的声誉来发表评论，所以我将尝试一个答案。 如果添加了一个计数器来跟踪myclass类中有多少个元素在“可见”状态，那么每次“ inview”事件触发时，您都可以更新该计数器，如果它是1，则打开它；如果是0，则关闭它，该怎么办？别的什么都不做。 这是我的jsfiddle 。

$(document).ready(function(){
    numInView = 0;
    $('.myclass').bind('inview', function (event, visible) {
      if (visible) {
        numInView++;
      } else {
        numInView--;
      }
      if (numInView === 1) {
        // element is now visible in the viewport
        $("h2").removeClass('myclass');
        $('body').css('color','red');
      } else if (numInView === 0) {
        // element has gone out of viewport
        $("h2").addClass('myclass');
        $('body').css('color','black');
      }
    });
});

专家提示：测试条件时，无需将其与true进行比较，除非您尝试不考虑“真实的”值（如数字1），但不是true。 如果您要测试的内容为true，则该条件无论如何都会通过而不会将其与true值进行比较。 那为您节省了一些代码：

if (visible == true) {
    bar();
} else {
    bazz();
}

与...相同

if (visible) {
    bar();
} else {
    bazz()
}

在这种情况下。