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