@Genri_Rus

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

Собственно вопрос в названии

Вот пример: https://codepen.io/Genri_Rus/pen/WBdLdL
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(); }
  );
})

При скроллинге иконка, которая находится справа - задан: position: fixed

Однако есть проблема, когда я нажимаю кнопку переместить и потом начинаю скроллить страницу, то картинка во время полета не подстраивается под ширину и высоту окна в DOM

Как сделать, чтобы картинка (во время полета) могла подстраиваться и лететь к иконке когда я скролю ?
  • Вопрос задан
  • 133 просмотра
Решения вопроса 1
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Решается более четким позиционированием летящего блока в самом начале. Плюс position: fixed; для него решает.



UPD: попробуй поизменять ширину окна в полёте.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы