Плавное перемещение объекста

Доброго вечера. Необходимо реализовать следующее: в шапке сайта есть кнопка "заказать обратный звонок". Нужно, чтобы при прокрутке страницы ниже она плавно улетела вправо-вниз, и там стала "position: fixed".Сейчас сделал костылями. Изначально кнопка висит справа снизу. А если экран в самом верху, то она перелетает в шапку сайта.
$(window).scroll(function(){
 var border = (document.documentElement.clientWidth - 980) / 2; // вычисляю ширину отступов по бокам сайта (нужно для перемещения вправо-влево в одну и ту же точку, независимо от ширины экрана)
 var width = document.documentElement.clientWidth; // нужно для условия (см.код)
 var height = document.documentElement.clientHeight; // нужно для условия, а также для высчитывания расстояния перелета на разных экранах
 if ( width > 950 && height > 540 ) { // Ограничение размеров экрана т.к. в translate ниже стоят "-", а при меньшем экране чем задано в этом условии, в translate передаются отрицательные числа, и выходит --n и стиль не работает
 if ($(this).scrollTop() = 10) { // Проверка, в самом ли мы верху. Если да, то 
 $( ".air_call" ).css({
 'transform': 'translate(-'+(border+60)+'px, -'+(height-540)+'px)', // то добавляем стиль перемещения. С этими параметрами кнопка на пк улетает куда надо. Но на телефонах идет промах из-за того что есть строка ввода адреса, которая то пропадает то появляется и идет сбой
 });
 }
 else {
 $( ".air_call" ).css({
 'transform': '', // если нет, то возвращаем обратно вправо вниз
 });
 }
 }
});
Минусы этого решения очевидны. Да, можно доработать, чтобы функция могла не только поднимать кнопку выше, но и ниже, если экран достаточно мал и в начале она была выше её конечного пункта назначения. Но мне нужен более надёжный и адекватный способ.Может, есть способ, как перемещать объект между блоками с id="start_point" и id="end_point", с учетом, что начальная точка position: relative, а конечная - fixed?
9 ответов

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


CraftLawrence, а пример можно? а то как то не укладываетсяНужно, чтобы при прокрутке страницы ниже она плавно улетела вправо-вниз
На локальной машине( Да, нужно именно чтобы она с position: relative улетала вправо-вниз и ставала fixed. А я сейчас сделал, что оно по-умолчанию fixed и находится справа-снизу, а при скроле в самый верх с помощью CSS летит вверх в шапку. А как только скрол ниже, сразу стиль убирается и кнопка летит туда, где она прописана по CSS - вправо-вниз.


CraftLawrence, не понимаю вас, что мешает добавить минимальный html и css к коду выше. пример Плавающий блок, замирающий над футером


CraftLawrence, не понимаю вас, что мешает добавить минимальный html и css к коду выше. пример Плавающий блок, замирающий над футером
Ну, ок.
<header>
 <a href="#" class="air_call"></a>
</header>
.air_call {
 z-index: 5;
 display: block;
 width: 65px;
 height: 65px;
 position: fixed;
 border-radius: 50%;
 transition: .5s;
 background: #61a7a1 url(/img/call.png) center center no-repeat;
 background-size: 80%;
 right: 55px;
 bottom: 250px;
}


CraftLawrence, так?
<!DOCTYPE html>

<html>
<head>
 <title>Untitled</title>
 <meta charset="utf-8">
 <style type="text/css">
 body {
 height: 2000px;
 }

 .air_call {
 z-index: 5;
 display: block;
 width: 65px;
 height: 65px;
 position: fixed;
 border-radius: 50%;
 transition: .5s;
 background: #61a7a1 url(/img/call.png) center center no-repeat;
 background-size: 80%;
 right: 55px;
 bottom: 250px;
 transition: all 1s ease-in;
}

.to{
 right: 0px;
 bottom: 0px;
}

 </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 <script>
$(function() {
$(window).scroll(function(){
 $( ".air_call" ).toggleClass('to',$(this).scrollTop() > 10)
});

});
 </script>
</head>

<body>

<header>


 <a href="#" class="air_call"></a>


</header>


</body>
</html>


CraftLawrence, так?
Нет-нет.Вот, нарисовал на картинке. Сначала оно в хедере, потом при скроле вниз ПЛАВНО уплывает туда, в угол вниз. Если и так будет не понятно, я сдаюсь)


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


CraftLawrence, или скрипт выше, делает то, что вы просите, либо я вас не понимаю и более ничем помочь не могу
Скрипт выше лишь меняет параметры right и bottom. А мне нужно, чтобы relative превратилось в fixed. Попробуйте, оно не работает ровно и красиво с помощью простого transition. Оно телепортируется вниз, а потом плавно летит вправо. А мне нужно, чтобы "полет" был плавным, по диагонали.


CraftLawrence, ок ... у меня нет вариантов