Shrinking Material Floating Action Button

ionic-v1
1

Hi,

Could someone show how to make a shrinking Material-floating action button in Ionic (shrinks on scrolling Up and shows up on scrolling down) just like seen on the App “Vice Versa”?

Here is a codepen with FAB : FAB codepen

Can you help a bit please @WidawskiJ

Thanks in advance. :wink:

2

There you go @naveenkarippai1

Don’t hesitate if you have questions

1 Like
3

Hi @WidawskiJ,

Thanks for the reply. It seems to work fine on codepen but not yet on my Project. I have custom CSS animations attached to FAB but from my understanding it shouldn’t affect shrinking effect.

I used “cta” on and added id=“cta” on md-button element after defining directive.

4

It shouldn’t indeed. Can you try and reproduce your issue? I won’t be able to help without seeing the bug

5

Hi @WidawskiJ,

It works fine on first time page load but when user navigates to another state and returns back to state where button is located ,it doesn’t shrink anymore.

On console I get this message on return page load : TypeError: el.attributes.candrag is undefined if (el.attributes.candrag.value){

Did you experience such an issue?

Thank you.

6

Hi Widaswski

May I know why I import the JS into the directive.js, The button appeared without icon and looks different.

Thank you

image
Pasted image1135×564 71 KB

image
Pasted image660×593 40.5 KB

image
Pasted image1034×624 71.5 KB

image
blob.jpg721×607 36.9 KB

Best Regards
ZIjun

7

I achieve it by using getScrollPosition and ng-show/ng-hide with a little css for zoom…

8

May I get your full code? I am using the ionic, is that usefu? Thanks

9

I use floating-button from this link https://github.com/pregiotek/ion-floating-menu then use ng-hidefor that

<ion-floating-button ng-hide="!fabscrolling" href="#/messages" has-footer="false" button-color="#2AC9AA" icon="ion-chatbox" icon-color="#fff" class="view-button-chat">
    </ion-floating-button>

.view-button-chat.ng-hide-add {
  -webkit-animation: zoomOut .08s linear;
  animation: zoomOut .08s linear;
}

.view-button-skype.ng-hide-add {
  -webkit-animation: zoomOut .08s linear;
  animation: zoomOut .08s linear;
}

then in my controller:

$scope.scroll = function() {
        $timeout(function () {
            $scope.scrolling = true;
            $scope.changeHeader('ben-header');
            //console.log($scope.scrolling);
        });
        scrollPositionfab = $ionicScrollDelegate.$getByHandle('memberOver').getScrollPosition().top;
        //console.log(scrollPositionfab);
        if (scrollPositionfab <= 10)
        {
            $scope.fabscrolling = true;
        }
        else {
            $scope.fabscrolling = false;
        }
    };

don’t forget to add delegate-handle=“memberOver” and on-scroll=“scroll()” in ion-content ex:

<ion-content padding="false" delegate-handle="memberOver" overflow-scroll="true" class="view-zerotop" on-scroll="scroll()">

PS: just use your preferred animations(I use animate.css for animation)

10

Thanks for your posting, but my ionic still cannot make it. If you don’t mind, please help me to check it.
https://creator.ionic.io/share/621ef595f545

Once again

Thank you

Best regards
yy