Возможность hide-FAB-on-scroll?

1

На днях в одном из Telegram каналов, задались вопросом - есть ли возможность плавного скрытия кнопки FAB при скроллинге. Люди реализовали, но без плавной анимации как toolbar или navbar.
У меня есть такая востребованность скрытия этой кнопки при показе большой таблицы с данными. Кнопка FAB занимает много места и даже перемещение на вправо или влево не помогает, приходится и туда сюда двигать таблицу.

2

Можно посмотреть как сделано в Navbar и сделать также для FAB:
стили - https://github.com/framework7io/framework7/blob/2dda5caabfc30fbd602baf2357e5dd1f0b2144aa/src/core/components/toolbar/toolbar.less#L196

сам метод - https://github.com/framework7io/framework7/blob/ca0a963692d2da54cc492672303dee15b681d482/src/core/components/toolbar/toolbar.js#L63

3

Можно, только условия для этого нужно выбрать правильные, если будет работать как скрытие 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
4

С поправкой на нужный page-content и FAB элемент