Форум

Black_Star · #1 (**permalink**) 17.12.2016, 13:49

Добрый день уважаемые. Появилась необходимость задать элементу событие при его скроллинге, а точнее когда пользователь не видет элемента прокручивая страницу. Вроди бы детский вопрос, но я где-то недопонимаю.
Приведу пример

<!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**) 17.12.2016, 14:20

Black_Star,
строка 37 что проверяет?

Black_Star · #3 (**permalink**) 17.12.2016, 14:49

Согласно моему пониманию $('.block').offset().top это длинна относительно начала страницы до обёкта (верхней левой точки дива)

рони · #4 (**permalink**) 17.12.2016, 15:15

Сообщение от Black_Star

это длинна относительно начала страницы до обёкта

и в каком случае эта величина будет ноль?

рони · #5 (**permalink**) 17.12.2016, 15:17

...!

<!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 () {


$(window).scroll(function() {

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

if (coord < $(window).scrollTop()) {

    console.log("Елемента больше не видно в браузере");
  }
else {
  console.log("Елемент снова в браузере виден");
}

});

  }
  </script>
</html>

Black_Star · #6 (**permalink**) 17.12.2016, 16:01

Спасибо, рони, ты как всегда на высоте.

Величина то у $('.block').offset() постоянная, и не меняется в процессе скроллинга. туплю.
Ещё вопрос, как данный метод модифицировать? Тут получается метод постоянно запрашивает DOM при скролленге что ни есть хорошо. Мне просто этот хак нужно внедрить в блок навигации для сайта. Есть в хедере менюшка с навигацией, когда пользователь опускается ниже этой менюшки, к ней применяется новый CSS стиль, со свойством position: fixed; и теперь данная навигация торчит у пользователя слева от экрана. Когда пользователь откручивает страницу вверх, свойство убирается

рони · #7 (**permalink**) 17.12.2016, 17:20

Black_Star,
https://learn.javascript.ru/task/throttle

и небольшая отимизация

window.onload = function() {
    var b = true, d = $(".block"),h = d.offset().top;
    $(window).scroll(function() {
        var a = h < $(window).scrollTop();
        a != b && ((b = a) ? d.addClass('fix'): d.removeClass('fix'))
    })
};

строка 4 постоянно (смотреть ссылку выше), строка 5 работа с классом только при переходе границы

рони · #8 (**permalink**) 17.12.2016, 18:11

<!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{
  position: relative;
  border: 1px solid #000;
  width: 800px;
  height: 1800px;
}

  .block{
    margin: 10%;
    width: 50px;
    height: 50px;
    background-color: red;
  }
.block.fix {
  background-color: #006400;
  position: fixed;
  margin-top: -7px;
}
</style>
<body>
  <div class="field">
  <div class="block"></div>
  </div>
</body>
  <script type="text/javascript">
  window.onload = function() {
    var b = true, d = $(".block"),h = d.offset().top, l = d.css("margin-left");
    $(window).scroll(function() {
        var a = h < $(window).scrollTop();
        a != b && ((b = a) ? d.addClass('fix').css({"margin-left": l}) : d.removeClass('fix').css({"margin-left":""}))
    })
};
  </script>
</html>

Black_Star · #9 (**permalink**) 17.12.2016, 19:46

Спасибо рони.
Я даже нашел библиотеку этой тормозилки https://github.com/cowboy/jquery-throttle-debounce
С методом throttle. Только пока что у меня ни чего не работает

function scrollNav() {

				$(window).scroll(function () {

						var coord = $navigationTop.offset().top + $navigationTop.height();

						if ($navigationSite.hasClass('navMob') && $(window).scrollTop() < coord) {

								function changeNav() {

										buttonNav.css({display: 'none'});
										navBar.show();
										$navigationSite.toggleClass('navMob');

								}

								$(window).scroll($.throttle(changeNav, 200));

						}
						else if ($(window).scrollTop() > coord) {
								buttonNav.css({display: 'block'});
								navBar.hide();
								$navigationSite.toggleClass('navMob');
						}

				});

		}

		scrollNav();

В консоле выдает ошибку в самой библиотеке, что странно

рони · #10 (**permalink**) 17.12.2016, 20:20

Black_Star,
потому что вы написали бред какой-то ...

Форум

Справочник

Discord чат

Курсы javascript