2

I have 2 headers and I want to hide the 2nd when scrolling trough the content, which is implemented with 'ion-slide-box' and 'ion-slide' to be able to slide the tabs and change from one template to the other (with different controller each template). 

.scroll-content{
    top: 0 !important;
    bottom: 0 !important;
}

1st header implemented in a directive template

<fake-statusbar></fake-statusbar>

2nd header 

<ion-content scroll="false" class="bar-positive">
    <ion-slide-box slide-tabs-scrollable="false" show-pager="false" ion-slide-tabs>
        <ion-slide ion-slide-tab-label="Catalog"><ion-nav-view name="tab-games"></ion-nav-view></ion-slide>
        <ion-slide ion-slide-tab-label="Social"><ion-nav-view name="tab-chats"></ion-nav-view></ion-slide>
        <ion-slide ion-slide-tab-label="Video"><ion-nav-view name="tab-videos"></ion-nav-view></ion-slide>
    </ion-slide-box>
</ion-content>

I am trying to call the 'slidingTabs' class which is by default the class of the 2nd header (is hidden), in a different directive to hide that selected class when scrolling trough the content. 

.directive('headerShrink', function ($document, $ionicScrollDelegate) {
        var fadeAmt;

        var shrink = function (header, content, amt, max) {
            amt = Math.min(44, amt);
            fadeAmt = 1 - amt / 44;
            ionic.requestAnimationFrame(function () {
                header.style[ionic.CSS.TRANSFORM] = 'translate3d(0, -' + amt + 'px, 0)';
                for (var i = 0, j = header.children.length; i < j; i++) {
                    header.children[i].style.opacity = fadeAmt;
                }
            });
        }; return {
            restrict: 'A',
            link: function ($scope, $element, $attr) {
                var starty = $scope.$eval($attr.headerShrink) || 0;
                var shrinkAmt; var header = $document[0].body.querySelector('div.slidingTabs');var headerHeight = header.offsetHeight; $element.bind('scroll', function (e) {
                    var scrollTop = null;
                    if (e.detail) {
                        scrollTop = e.detail.scrollTop;
                    } else if (e.target) {
                        scrollTop = e.target.scrollTop;
                    }
                    if (scrollTop > starty) {
                        // Start shrinking
                        shrinkAmt = headerHeight - Math.max(0, (starty + headerHeight) - scrollTop);
                        shrink(header, $element[0], shrinkAmt, headerHeight);
                    } else {
                        shrink(header, $element[0], 0, headerHeight);
                    }
                });
            }
        };

})

and I add in each template content 'header-shrink scroll-event-interval="5"'

All of this works only for the 1st header class (to hide the 1st header) or when I call the class 'bar-positive' which hide the whole content. NOT with' .slidingTabs' class. Can someone have an idea why it doesn't work? Or maybe can someone give me a hint of how to implement it? I am trying to guide myself from these two demos

Shrinking Header: Nightly

and

Facebook Style Shrinking Header & Tabs Ionic beta.13 tabs

0 Answers0