Плавное перемещение объекста
Доброго вечера.
Необходимо реализовать следующее: в шапке сайта есть кнопка "заказать обратный звонок". Нужно, чтобы при прокрутке страницы ниже она плавно улетела вправо-вниз, и там стала "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? |
CraftLawrence,
а пример можно? а то как то не укладывается Цитата:
|
Цитата:
Да, нужно именно чтобы она с position: relative улетала вправо-вниз и ставала fixed. А я сейчас сделал, что оно по-умолчанию fixed и находится справа-снизу, а при скроле в самый верх с помощью CSS летит вверх в шапку. А как только скрол ниже, сразу стиль убирается и кнопка летит туда, где она прописана по CSS - вправо-вниз. |
CraftLawrence,
не понимаю вас, что мешает добавить минимальный html и css к коду выше. пример http://javascript.ru/forum/dom-windo...tml#post287819 |
Цитата:
<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,
хороший макет ускоряет поиск решения ... Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 22:01. |