Shrinking Material Floating Action Button


#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


#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





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