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

Доброго вечера. Необходимо реализовать следующее: в шапке сайта есть кнопка "заказать обратный звонок". Нужно, чтобы при прокрутке страницы ниже она плавно улетела вправо-вниз, и там стала "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, а пример можно? а то как то не укладывается
Изначально кнопка висит <font color="Red">справа снизу</font>. А если экран в самом верху, то она перелетает в шапку сайта
Нужно, чтобы при прокрутке страницы ниже она плавно улетела вправо-вниз


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


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


CraftLawrence, не понимаю вас, что мешает добавить минимальный html и css к коду выше. пример <a href="http://javascript.ru/forum/dom-window/43757-plavayushhijj-blok-zamirayushhijj-nad-futerom.html#post287819" target="_blank">Плавающий блок, замирающий над футером</a>
Ну, ок.
<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, ок ... у меня нет вариантов