На днях в одном из Telegram каналов, задались вопросом - есть ли возможность плавного скрытия кнопки FAB при скроллинге. Люди реализовали, но без плавной анимации как toolbar или navbar.
У меня есть такая востребованность скрытия этой кнопки при показе большой таблицы с данными. Кнопка FAB занимает много места и даже перемещение на вправо или влево не помогает, приходится и туда сюда двигать таблицу.
Можно посмотреть как сделано в Navbar и сделать также для FAB:
стили - https://github.com/framework7io/framework7/blob/2dda5caabfc30fbd602baf2357e5dd1f0b2144aa/src/core/components/toolbar/toolbar.less#L196
Можно, только условия для этого нужно выбрать правильные, если будет работать как скрытие navbar/toolbar то это может раздражать)) Например если страница проскролилась вниз, например, на 50px:
$('.page-content').on('scroll', function () {
var scrollTop = this.scrollTop;
if (scrollTop > 50) {
// прячем
$('.fab-right-bottom')
.transition(400)
.transform('translateY(calc(100% + var(--f7-fab-margin) + var(--f7-safe-area-bottom)))')
} else {
$('.fab-right-bottom').transform('translateY(0)')
}
});
2 Likes
С поправкой на нужный page-content
и FAB элемент