Question

如何查看整个元素何时出现？

在下面的示例中，如果一个框进入视图，我想将框的背景颜色更改为红色。此外，顶部框（应该已经完全显示在屏幕上）应该自动为红色（因为它已经完全在视图中）。

我该怎么做？

HTML：

body {
  margin: 50px;
}

.container {
  width: 300px;
  background: lightgrey;
  padding: 50px;
}

.box {
  display: block;
  width: 100%;
  height: 300px;
  background: grey;
}

.box:not(:last-of-type) {
  margin-bottom: 50px;
}

CSS：

{{1}}

Answer 1

快速举例。无论如何都不是完美的代码。应该给你一个主意。

checkBoxes();

$(window).on('scroll', function() {
    checkBoxes();
});

function checkBoxes() {
    $('.box').each(function(i, v) {
      if (_isInTheScreen($(window), $(v), -$(v).height() )) {
        $(v).css('background', 'red');
      }
    });
}

/*
 * @param $ct : container - jQuery obj
 * @param $el : element selected - jQuery obj
 * @param optionOffset : offset
 */
function _isInTheScreen($ct,$el,optionOffset) {
  var i = $ct,
      g = $el,
      e = i.scrollTop(),
      d = i.scrollLeft(),
      f = g.offset(),
      l = f.top,
      c = f.left,
      j = true;

  j = (e-100<=(l))&&((e+i.height()+optionOffset)>=((l))&&(d<=c)&&((d+i.width())>=c));
  return j;
}

注意：你应该在滚动时绑定时总是加油

在这里摆弄：https://jsfiddle.net/cd2733mv/2/

Answer 2

如果您只想检查元素是否在窗口高度内，不一定是窗口宽度：

function highlightBoxes() {
  var windowStart = $(window).scrollTop();
  var windowEnd = windowStart + $(window).height();

  $('.box').each(function() {
    var box = $(this);
    var start = box.offset().top;
    var end = start + box.height();

    if (windowStart <= start && windowEnd >= end) {
      box.addClass('active');
    } else {
      box.removeClass('active');
    }
  });
}

highlightBoxes();
$(document).scroll(highlightBoxes);
$(window).resize(highlightBoxes);

小提琴：https://jsfiddle.net/7gr1qkeq/4/

编辑：

如果您想检查完整可见性，即宽度+高度：https://jsfiddle.net/7gr1qkeq/5/

检查何时查看ENTIRE元素

2 个答案: