Как правильно сделать offset при скроллинге?

Question

[Genri_Rus]

Добрый день!

Не могу понять, как сделать offset в зависимости от скроллинга ?

В моем примере картинка летит к элементу, у которого position: fixed
Однако при прокрутке колесиком мышки, offset запоминает только начальные координаты положения у иконки

А как сделать, чтобы offset запоминал не только начальные координаты положения, но и подстраивался под скролл колесиком ?

Вот пример:

<div>
  <p class="img"><img src="http://lorempixel.com/30/30/city">
  <button class="move">Переместить</button>
  </p>
</div>

<div>
  <p class="img"><img src="http://lorempixel.com/30/30/technics">
  <button class="move">Переместить</button>
  </p>
</div>

<div class="icon-right"><i class="fa fa-tags" aria-hidden="true"></i></div>

const icon = $('.icon-right');

$('.move').click(function() {
    let img = $(this).parent().find('img');
    let offset = img.offset();
    $('body').append('<div class="moved-item"></div>');
    var copy = img.clone();
  
    let copyItem = copy.appendTo('.moved-item');
  
   $('.moved-item').css({'top' : offset.top + 'px', 'left' : offset.left + 'px'}).fadeIn("slow").animate({'top': icon.offset().top, 'left': icon.offset().left + 20}, 1200, 
    function(){ $(this).remove(); }
  );
})

Более наглядный пример: https://codepen.io/Genri_Rus/pen/JqEgyg

Answer 1

[Валентин В.]

сделать moved-item тоже через position: fixed

имею ввиду изменить стиль moved-item и использование анимации в скрипте
например, сделать такую анимацию

$('.moved-item').css({'top' : offset.top-window.scrollY + 'px', 'left' : offset.left + 'px'}).fadeIn("slow").animate({'top': icon.offset().top-window.scrollY, 'left': icon.offset().left + 20}, 1200, 
    function(){ $(this).remove(); }
  );

Comments

[Genri_Rus]

Я сделал, что-то еще хуже стало: https://codepen.io/Genri_Rus/pen/JqEgyg

P.S. До этого у moved-item был position: absolute

[Валентин В.]

Дополнил ответ, думаю так можно решить

[Genri_Rus]

Валентин В., спасибо за помощь !

Вроде неплохо, а вот как еще сделать, чтобы картинка летела сначала над иконкой ?

Т.е. сейчас картинка летит прямо к иконке, а как сделать, чтобы она сначала вверх летела, а потом вниз в иконку ?

нужно самой иконки offset().top увеличить ?

[Валентин В.]

что-то такое?

$('.moved-item').css({'top' : offset.top-window.scrollY + 'px', 'left' : offset.left + 'px'}).fadeIn("slow").animate({'top': icon.offset().top-window.scrollY-30, 'left': icon.offset().left + 20}, 1200, 
    function(){ $('.moved-item').css({'top' : icon.offset().top-window.scrollY-30 + 'px', 'left' : icon.offset().left + 20 + 'px'}).fadeIn("slow").animate({'top': icon.offset().top-window.scrollY, 'left': icon.offset().left + 20}, 500, 
    function(){ $(this).remove(); }) }
  );

[Genri_Rus]

Валентин В., очень благодарен Вам, примерно так, но только не так близко к самой иконке )

А еще такой вопрос, можно ли при скроллинге не менять позицию у картинки ?

Т.е. она должна всегда вылетать из той точки, где изначально была ?

Получается такой эффект, когда я нажимаю на кнопку "Переместить" и потом начинаю быстро скролить, то картинка сразу вниз падает

Нужно чтобы картинка была на той стартовой позиции где раньше была, но только уже во время полета подстраивалась под скроллинг самой иконки ...

[Валентин В.]

думаю вот вариант получше (почище)

$('.moved-item').css({"display": "block", 'top' : offset.top-window.scrollY + 'px', 'left' : offset.left + 'px'}).animate({'top': icon.offset().top-window.scrollY-30, 'left': icon.offset().left + 20}, 700, 
    function(){ $('.moved-item').css({'top' : icon.offset().top-window.scrollY-30 + 'px', 'left' : icon.offset().left + 20 + 'px'}).animate({'top': icon.offset().top-window.scrollY, 'left': icon.offset().left + 20}, 500, 
    function(){ $(this).remove(); }) }
  );

чтобы сделать эффект слежения нужно вынести этот код в функцию с итератором и запускать через таймаут по шагу времени
setTimeout(function(i){...}.bind(i+1), 200)
при этом значения top и left расчитывать не окончательные, а относительно итерации i и общего числа итераций n

offset.top + (offset.top - (icon.offset().top-window.scrollY-30))*i/n

[Genri_Rus]

Валентин В., в очередной раз спасибо, а можно полный пример на codepen итератором ?

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

https://codepen.io/Genri_Rus/pen/JqEgyg

[Валентин В.]

Не понял на счёт "не отталкивается".

Полный код довольно громоздкий, у меня не будет времени такой написать.

[Genri_Rus]

Валентин В., мне нужно что-то типа такого: https://codepen.io/Genri_Rus/pen/mYwdmj

Картинку видно как она двигается с начальных координат

Но ваш последний код не делает такой эффект:

$('.moved-item').css({"display": "block", 'top' : offset.top-window.scrollY + 'px', 'left' : offset.left + 'px'}).animate({'top': icon.offset().top-window.scrollY-30, 'left': icon.offset().left + 20}, 700, 
    function(){ $('.moved-item').css({'top' : icon.offset().top-window.scrollY-30 + 'px', 'left' : icon.offset().left + 20 + 'px'}).animate({'top': icon.offset().top-window.scrollY, 'left': icon.offset().left + 20}, 500, 
    function(){ $(this).remove(); }) }
  );

Вот пример: https://codepen.io/Genri_Rus/pen/JqEgyg

[Genri_Rus]

Валентин В., а может есть пример или статья, как сделать с итератором такое слежение ?

[Genri_Rus]

Валентин В., может у Вас будет время показать более наглядный пример с итератором ?

Спасибо ..

[Genri_Rus]

Валентин В., мне нужно убрать этот эффект при скроллинге:
https://c.radikal.ru/c24/1905/5a/e77898af027e.png