Элементы в видимой области окна браузера

<< Рецепты

Если вам нужно определить, какие элементы попадают в данный момент в видимую область окна браузера, следует использовать информацию о позиции интересующих элементов на странице и размер горизонтальной прокрутки: 

// функция, которая по заданному селектору 
// найдет соответствующие ему элементы, которые
// при этом попадают в видимую область окна
function inWindow(s){
  var scrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();
  var currentEls = $(s);
  var result = [];
  currentEls.each(function(){
    var el = $(this);
    var offset = el.offset();
    if(scrollTop <= offset.top && (el.height() + offset.top) < (scrollTop + windowHeight))
      result.push(this);
  });
  return $(result);
}

После добавления этой функции в скрипт вашей страницы, можно будет найти все div-элементы класса box таким образом: 

var boxesInWindow = inWindow("div.box");
 
// сделаем фон этих элементов красным
boxesInWindow.css("background-color", "red");

Используемые методы jQuery