Можно ли с помощью Javascript определить, когда определенный элемент больше не виден, например, когда пользователь прокручивает страницу достаточно далеко вниз или когда браузер свернут или закрыт другим окном? Общая цель состоит в том, чтобы заменить рекламу только тогда, когда текущая реклама не видна пользователю.
Одна из идей состоит в том, чтобы очень простой, невидимый Java-апплет взаимодействовал со страницей каждый раз, когда вызывается метод paint(). Я почти уверен, что это сработает, но я бы хотел по возможности избегать использования апплетов.
Ответ 1 · рейтинг 6 · Paolo Bergantino
Я не уверен, есть ли способ определить, находится ли окно над элементом или окно свернуто (хотя я думаю, что вы можете сделать последнее, подключив что-то к размытию окна? Я не уверен. ..). В любом случае, что касается прокрутки, эта часть вопроса уже задавалась несколько раз, и это это быстрая демонстрация, которую я придумал, чтобы показать, как это сделать. В примере что-то происходит, когда элемент прокручивается в поле зрения, но логика, конечно, та же. Во всяком случае, код:
$(document).ready(function() {
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
var myelement = $('#formcontainer');
var mymessage = $('#mymessage');
$(window).scroll(function() {
if(isScrolledIntoView(myelement)) {
mymessage.hide();
} else {
mymessage.show();
}
});
});
В нем не так много специфики jQuery, поэтому вы можете убрать это:
window.addEventListener('load', function() {
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
var el = document.getElementById('myelement');
window.addEventListener('scroll', function() {
if(isScrolledIntoView(el)) {
// do something when element is scrolled into view
} else {
// do something when it is not in view
}
}, false);
}, false);
