Since I do not own the information, I would like to receive information from and to, how to act on the DIV while scrolling to the center?

There are no specific examples, or rather, what I did turned out to be nonsense!

A ready-made solution is not interested, but a competent explanation with an example is required. The best answer will be rewarded after 2 days with 200 points for the work, the competition will be announced

Dear experts explain how this works?

var $win = $(window); var $marker = $('#marker'); $win.scroll(function() { if ($win.scrollTop() + $win.height() >= $marker.offset().top) { $win.unbind('scroll'); // load there } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This was taken from the toaster and did not work, and I tried such devices from the network 11

  • Perhaps you should read about the Intersection Observer API ? - user207618
  • I tried to read but did not understand anything - user33274
  • This, however, is not a reason to throw away a great tool. - user207618
  • I study it, tell me why you did not answer the question? - user33274
  • Did not want to happen. - user207618

1 answer 1

There is no html markup in your example, so it cannot work, but it works like this:

$win.scrollTop() scrolling value of the page $win.scrollTop() and the height of the window $win.height() , this gives us the position of the page relative to the bottom of the window, since we need to know if the element crossed the lower border of the window to find out if it is visible, then check if this value is greater than the indent of the desired element from the top of the $marker.offset().top page, then the element has already appeared at the bottom of the window, and is therefore visible.

 var $win = $(window); var $marker = $('#marker'); //отслеживаем событие прокрутки страницы $win.scroll(function() { //Складываем значение прокрутки страницы и высоту окна, этим мы получаем положение страницы относительно нижней границы окна, потом проверяем, если это значение больше, чем отступ нужного элемента от верха страницы, то значит элемент уже появился внизу окна, соответственно виден if($win.scrollTop() + $win.height() >= $marker.offset().top) { $('#message').html('виден'); //выполняем действия если элемент виден }else{ $('#message').html('не виден'); //выполняем действия если не элемент виден } }); 
 #marker{ margin-top: 500px; width: 200px; height: 100px; background: red; } #message{ position: fixed; left: 20px; top: 20px; color: red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="message"></div> <div id="marker"></div>

  • one
    @Geyan, On so count the coordinates of the center of the screen and compare with them, and not with the bottom edge - Grundy
  • @Geyan instead of the height of the screen, take half the height and get the middle of the screen, not the bottom edge, the same is logical) - Vadim Leshkevich
  • @Geyan Well, I answered, instead of $win.height() use $win.height()/2 , so you get the middle of the screen, not the bottom edge - Vadim Leshkevich