当类在视口中时显示元素

Question

I'm trying to make a div only appear when elements of a certain class are visible in the viewport.

I got almost there via this 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');
      }
    });
});

but as you can see by this edit http://jsfiddle.net/deenbag/6D9x5/ the event is triggered every time the any element with the class enters or exits the viewport, thus an exiting element will turn off the desired effect even if another element with the relevant class is visible.

i also have been messing with this plugin but couldn't figure out how to get it to apply to what i want to do. http://opensource.teamdf.com/visible/examples/demo-basic.html

Answer 1

Just keep track of the visible elements in an array:

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

---

Note that you could simplify it to

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

but this could be more error-prone.

Demo

Answer 2

Since I don't have enough reputation to comment I'm going to attempt an answer. What if you added a counter that kept track of how many elements with the myclass class are "in view" then every time the "inview" event triggers you could update the counter and if it's 1 you switch on if it's 0 you switch off if it's anything else you do nothing. Here's my 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: When testing a condition you don't need to compare it to true unless you're trying to discount "truthy" values (like the number 1), but not true. If the thing you're testing is true then the condition will pass anyway without comparing it to the value true. That is save your self some code:

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

does the same as

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

in this scenario.