[LADYX]

Alexander Belov,
я прошу прощения за долгое молчание, в доме было чп.
Waypoints это тоже целый плагин. А мне нужно гораздо проще. Я вот набросал:

<p></p>
<div class="person"><img alt="" src="https://i02.fotocdn.net/s16/240/gallery_xs/254/54328815.jpg"></div>
<p></p>

.person {
  margin-left: 10px;
  transition: margin-left .4s;
}
p {
  height: 700px;
}

$(function() {
$('.person').css({'margin-left':'50px'});
  $(window).on('scroll', function(e) {
    if ($(window).scrollTop() > $('.person').offset().top - $(window).height()) {
      $('.person').css({'margin-left':'10px'});
    }
  });
});

https://jsfiddle.net/LADYX/6smL4jwz/2/

Но у меня получается так, что блок меняет margin сразу же, как только внизу экрана показался его уже первый пиксель. А мне нужно, чтобы он в нижней части экрана был с отступом 50px, и по мере прокрутки вверх до центра экрана он плавно менял отступ до 10px. Помогите мне, пожалуйста.