При скроллинге страницы вниз, блок меняет свойство когда находится уже вверху экрана. А как сделать, чтобы свойство менялось, когда блок будет находится по центру вертикали экрана?
$(function() {
var person = $('.person');
person.css({
'margin-left': '300px'
});
$(window).on('scroll', function(e) {
var h = ($(window).height() - person.height()) / 2;
$('.person').each(function() {
if ($(window).scrollTop() + $(this).height() > $(this).offset().top) {
$(this).css({
'margin-left': '10px'
});
} else {
$(this).css({
'margin-left': '300px'
});
}
});
});
});
.person {
margin-left: 10px;
transition: margin-left .4s;
}
p {
height: 700px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>
<div class="person"><img alt="" src="https://i02.fotocdn.net/s16/240/gallery_xs/254/54328815.jpg"></div>
<p></p>
<div class="person"><img alt="" src="https://i02.fotocdn.net/s16/240/gallery_xs/254/54328815.jpg"></div>
<p></p>
<div class="person"><img alt="" src="https://i02.fotocdn.net/s16/240/gallery_xs/254/54328815.jpg"></div>
<p></p>
<p></p>