javascript - 当类在视口(viewport)中时显示元素

Question

我试图让一个 div 只在特定类的元素在视口(viewport)中可见时出现。

我几乎通过这个 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/每次具有该类的任何元素进入或退出视口(viewport)时都会触发该事件，因此即使具有相关类的另一个元素可见，退出的元素也会关闭所需的效果。

我也一直在弄乱这个插件，但不知道如何让它应用到我想做的事情上。 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