Появление блока в области видимости?

#javascript #jquery

Так как не владею информацией , хотелось бы получить информацию от и до , как действовать
на DIV при прокрутки в центр ?

Конкретных примеров нету , точнее то что я делал оказалось ерундой !

Не интересует готовое решение но требуется грамотное разъяснение с примером здесь 
Лучший ответ будет вознаграждён через 2 дня 200 балами за труды , конкурс будет объявлен 

Уважаемые специалисты поясните как это работает ?



var $win = $(window);
var $marker = $('#marker');
$win.scroll(function() {
  if ($win.scrollTop() + $win.height() >= $marker.offset().top) {
    $win.unbind('scroll'); // load there 
  }
});





Это взято с тостер и не работало 
и таких приеров из сети 11 пробовал 
    

Ответы

Ответ 1

В вашем примере нет html разметки, поэтому работать он не может, а работает это так:

Складываем значение прокрутки страницы $win.scrollTop() и высоту окна $win.height(),
этим мы получаем положение страницы относительно нижней границы окна, так как нам нужно
узнать пересек ли элемент нижнюю границу окна, чтобы узнать стал ли он виден, потом
проверяем, если это значение больше, чем отступ нужного элемента от верха страницы
$marker.offset().top, то значит элемент уже появился внизу окна, соответственно виден.



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;
}