Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.12.2016, 13:50
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Скролл элемента .scroll() + событие
Добрый день уважаемые. Появилась необходимость задать элементу событие при его скроллинге, а точнее когда пользователь не видет элемента прокручивая страницу. Вроди бы детский вопрос, но я где-то недопонимаю.
Приведу пример
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<style type="text/css">

.field{
	border: 1px solid #000;
	width: 800px;
	height: 1800px;
}

	.block{
		margin: 10%;
		width: 50px;
		height: 50px;
		background-color: red;
	}
</style>
<body>
	<div class="field">		
	<div class="block"></div>
	</div>
</body>
	<script type="text/javascript">
		
	window.onload = function () { 


$("body").scroll(function() {

 var coord = $('.block').offset().top;

if ($('.block').offset().top == 0) {
		
		console.log("Елемента больше не видно в браузере");
	}
else {
	console.log("Елемент снова в браузере виден");
}

});

	}
	</script>
</html>

Почему оно не срабатывает? Мне необходимо что б при исчезновение нижней грани элемента из области видимости отписывало сообщение в консоль, при появлении отписывало второе сообщение
Ответить с цитированием
  #2 (permalink)  
Старый 19.12.2016, 08:38
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от Black_Star
Приведу пример
Даже из примера видно, что твое событие не срабатывает...

А если продолжить твой пример - видно и остальное.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<style type="text/css">
.field{
	border: 1px solid #000;
	width: 800px;
	height: 1800px;
}
.block{
	margin: 10%;
	width: 50px;
	height: 50px;
	background-color: red;
}
#test {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 30px;
	border: 1px solid;
}
</style>
<body>
	<div id="test"></div>		
	<div class="field">		
		<div class="block"></div>
	</div>
<script type="text/javascript">
window.onload = function () { 
	window.onscroll=function() {
		var coord = $('.block').offset().top;
		$('#test').text(coord);
		if (coord == 0) {
			console.log("Елемента больше не видно в браузере");
		} else {
			console.log("Елемент снова в браузере виден");
		}
	};
};
</script>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Событие при выборе элемента из выпадающего списка в input type="email" Алексей Горохов Events/DOM/Window 4 27.12.2013 10:38
Событие удаления элемента из DOM Danxil Events/DOM/Window 1 11.11.2013 22:54
Событие загрузки элемента, но не load grecha Events/DOM/Window 2 08.05.2013 01:31
focus() для элемента, не поддерживающего событие focus mosgaz jQuery 11 06.12.2011 17:51
Как прокрутить скролл до элемента PAMAC Общие вопросы Javascript 2 04.10.2010 09:56