Question

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

几乎到了那里

$(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);
});

Demo

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

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

但这可能更容易出错。

Demo

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');
      }
    });
});

Pro-tip：在测试条件时，除非你试图打折“truthy”值（如数字1），否则你不需要将它与true进行比较，但不是真的。如果您正在测试的东西是真的那么条件将无论如何都会通过，而不会将其与值true进行比较。那就是保存自己的一些代码：

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

与

相同

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

在这种情况下。

当class在视口中时显示元素

2 个答案: