1

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

$(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>

1 ответ 1

1

Можешь попробовать вот этот код. Сразу как элемент будет по середине страницы то будет применен стиль.

  $(function() {
  var person = $('.person');
  person.css({
      'margin-left': '250px'
  });

  $(window).on('scroll', function(e) {
      $('.person').each(function() {

          /** Получить середину длины экрана */
          var windowVertivalCenterPosition = $(window).width() / 2;

          /** Получить середину изображения. То есть взять позицию изображения и прибавить к середине изображения */
          var imageReleativePosition = $(this).offset().left + ($(this).width() / 2);

          /** Если нужно полить точно вертикальное совпадение по середине */
          if (windowVertivalCenterPosition - imageReleativePosition == 0) {
              $(this).css({
                  'margin-left': '10px'
              });
          }
      });
  });
  });
.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>

Но не знаю стоит ли использовать точное совпадение по середине - тем более во время скроллинга? По крайне мере если тебе нужна буде более не строгая проверка совпадения по середине - можешь использовать это проверку вместо той что выше.

/** Если нужно полить вертикальное совпадение по середине +- 100px */
if (windowVertivalCenterPosition - imageReleativePosition < 200 && windowVertivalCenterPosition - imageReleativePosition > -200) {
    $(this).css({
        'margin-left': '10px'
    });
}
0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.