Форум

CraftLawrence · #1 (**permalink**) 12.01.2017, 20:43

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

рони · #2 (**permalink**) 12.01.2017, 21:12

CraftLawrence,
а пример можно? а то как то не укладывается

Сообщение от CraftLawrence

Изначально кнопка висит справа снизу. А если экран в самом верху, то она перелетает в шапку сайта

Нужно, чтобы при прокрутке страницы ниже она плавно улетела вправо-вниз

CraftLawrence · #3 (**permalink**) 12.01.2017, 22:29

Сообщение от рони

CraftLawrence,
а пример можно? а то как то не укладывается

Нужно, чтобы при прокрутке страницы ниже она плавно улетела вправо-вниз

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

рони · #4 (**permalink**) 12.01.2017, 23:02

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

CraftLawrence · #5 (**permalink**) 13.01.2017, 13:57

Сообщение от рони

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;
}

рони · #6 (**permalink**) 13.01.2017, 15:46

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 · #7 (**permalink**) 13.01.2017, 20:35

Сообщение от рони

CraftLawrence,
так?

Нет-нет.

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

рони · #8 (**permalink**) 13.01.2017, 20:39

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

CraftLawrence · #9 (**permalink**) 13.01.2017, 20:46

Сообщение от рони

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

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

рони · #10 (**permalink**) 13.01.2017, 21:31

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

Форум

Справочник

Discord чат

Курсы javascript