当类在视口中时显示元素答案

【问题标题】：show element when class is in viewport当类在视口中时显示元素
【发布时间】：2014-02-17 22:36:58
【问题描述】：

我试图让 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

【问题讨论】：

那么你想让元素保持可见还是让它消失？
你想改变车身颜色吗？您正在寻找的最终结果是什么？每当元素离开时它都会被覆盖，因此您需要检查滚动上是否可见。或者你可以像这里一样使用 .each()：jsfiddle.net/6D9x5/2
我正在尝试制作一个按钮，该按钮将出现在我的 tumblr 上，以一次播放所有可见的视频帖子，但仅在视频可见时出现

标签： javascript jquery html css viewport

【解决方案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

【讨论】：

认为这可行，但在滚动之前不适用于视口中的元素？ jsfiddle.net/deenbag/6D9x5
@milpool 我从未使用过inview 事件，所以可能有更好的解决方案，但您可以尝试在 onload 时运行document.documentElement.scrollTop += 1

【解决方案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');
      }
    });
});

专业提示：在测试条件时，您无需将其与真值进行比较，除非您试图降低“真实”值（如数字 1），但不是真实值。如果您正在测试的事物为真，那么条件无论如何都会通过，而不会将其与值 true 进行比较。那就是为你自己节省一些代码：

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

做同样的事情

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

在这种情况下。

【讨论】：