Как я могу определить, находится ли HTML-элемент вне экрана?

Question

Как я могу определить с помощью jQuery, что данный элемент находится выше верхней части видимой области окна или ниже ее нижней части? Это позволило бы мне определить, был ли предмет за кадром и в каком направлении.

В идеале:

var topPos = $(this).relativeToTop();
var bottomPos = $(this).relativeToBottom();
var isOnScreen = topPos >= 0 && bottomPos >= 0;

Есть ли где-нибудь плагин или пример в сети?

Answer 1

var off = $(this).offset();
var t = off.top;
var l = off.left;
var h = $(this).height();
var w = $(this).width();
var docH = $(window).height();
var docW = $(window).width();

var isEntirelyVisible = (t > 0 && l > 0 && t + h < docH && l+ w < docW);

EDIT где-то там, возможно, также стоит проверить $ (document) .scrollTop (), в зависимости от того, как вы хотите, чтобы скрипт работал с состоянием прокрутки ...

Answer 2

Спасибо Дэвиду за сообщение, оно помогло мне решить проблему с «полностью видимым элементом», однако мне пришлось адаптировать рекомендацию к следующему, потому что моя родительская область div была больше видимого размера окна. Следующий код работает для меня, хотя мне нужно беспокоиться только о вертикали.

elem является объектом jquery, и это, вероятно, будет работать только для html5

function isFullyVisible (elem) {
  var off = elem.offset();
  var et = off.top;
  var el = off.left;
  var eh = elem.height();
  var ew = elem.width();
  var wh = window.innerHeight;
  var ww = window.innerWidth;
  var wx = window.pageXOffset;
  var wy = window.pageYOffset;
  return (et >= wy && el >= wx && et + eh <= wh + wy && el + ew <= ww + wx);  
}