Полимер - позиционирование бумажной фабрики?

Я пытаюсь сделать Polymer paper-fab (плавающая кнопка действия) в правом нижнем углу экрана. Я также хочу, чтобы он исчезал при прокрутке вниз, а затем возвращался при прокрутке вверх (как в приложении Google+ для Android). Как мне сделать эти 2 вещи? Вот тестовый сайт: http://www.infinitech.org/beta. Большое спасибо за помощь!


floating-action-button css polymer
person Kyle Horkley    schedule 27.11.2014    source источник
comment
Знаете ли вы, нашли ли вы лучшее решение, чем то, что @A. Дюппен предложил? Такое ощущение, что paper-fab должна иметь какую-то систему, чтобы хотя бы позиционировать себя как плавающую.   -  person Whyser    schedule 24.09.2015
comment
@ user2422321 Сейчас нет. Его ответ кажется лучшим решением для этого.   -  person Kyle Horkley    schedule 25.09.2015
comment
Вы нашли решение, чтобы показать/скрыть потрясающие события прокрутки в полимере?   -  person chwzr    schedule 22.05.2017

Ответы (4)


arrow_upward
3
arrow_downward

Для позиционирования вам придется использовать значения position: absolute и верхнее/нижнее/левое/правое. Для исчезновения при прокрутке вниз вам, вероятно, придется использовать события прокрутки и преобразования CSS. Я тоже не лучший, поэтому может быть лучшее решение.

person Alex Dueppen    schedule 28.11.2014

arrow_upward
13
arrow_downward

Для позиционирования:

<style>

    paper-fab {
        position: fixed;
        right: 25px;
        bottom: 30px;          
    }

</style>
person pomber    schedule 29.05.2016

arrow_upward
2
arrow_downward

Если вы хотите, чтобы позиция даже прокручивалась, используйте position: fixed и элементы слева/сверху/справа/снизу.
Вот ссылка: http://www.w3schools.com/css/css_positioning.asp

person shockwave    schedule 14.02.2016

arrow_upward
0
arrow_downward

Дополнение к предыдущему ответу...

Чтобы решить проблему с прокруткой вниз, установите свойство CSS z-index на некоторое число больше 1.

<style>
  paper-fab {
    z-index: 2;

    position: fixed;
    bottom: 30px;          
    right: 25px;
  }
<style>
person Let Me Tink About It    schedule 29.05.2018